/*
Theme Name: Tanguy Albertini — Étude
Description: Design 1 du site de Tanguy Albertini, avocat au Barreau de Paris (démo).
Author: Outrun
Version: 0.8.1
Requires at least: 6.6
Text Domain: tanguy-v1
*/

:root{
  --ivoire:#F6F1E8; --papier:#FBF8F2; --filet:#E4DACA; --sapin:#1F3B2D; --sapin-2:#2C5140;
  --mousse:#DDE4D6; --bordeaux:#6E1F2B; --encre:#1D211E; --gris:#5F625B;
  --serif:"Source Serif 4",Georgia,serif; --sans:"Instrument Sans",system-ui,sans-serif;
  --max:1200px;
}
body{background:var(--ivoire);color:var(--encre);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;margin:0}
a{color:inherit;text-decoration:none}
:where(.principal) p,:where(.principal) h1,:where(.principal) h2,:where(.principal) h3,:where(.principal) ul{margin:0}
.enveloppe{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
.etroit{max-width:820px}
h1,h2,h3{font-family:var(--serif);color:var(--sapin);font-weight:400}
h1 em,h2 em{font-style:italic;color:var(--bordeaux)}
.mono{width:42px;height:42px;fill:var(--sapin);flex:none}

/* Surtitre et liens */
.surtitre{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--sapin)}
.surtitre::before{content:"";width:40px;height:1px;background:var(--bordeaux);transition:width .7s cubic-bezier(.6,0,.2,1)}
.lien a{font-size:15px;color:var(--sapin);border-bottom:1px solid var(--bordeaux);padding:4px 0 2px;white-space:nowrap}

/* Boutons */
.wp-block-button__link,.bouton{display:inline-flex;align-items:center;font:500 15px var(--sans);padding:12px 20px;border-radius:999px;background:var(--sapin);color:var(--ivoire);border:0;transition:background .2s}
.wp-block-button__link:hover,.bouton:hover{background:var(--sapin-2);color:var(--ivoire)}
.bouton-contour{display:inline-flex;align-items:center;font:500 15px var(--sans);padding:10px 20px;border-radius:999px;color:var(--sapin);box-shadow:inset 0 0 0 1.5px var(--sapin);transition:background .2s,color .2s}
.bouton-contour:hover{background:var(--sapin);color:var(--ivoire)}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--sapin);box-shadow:inset 0 0 0 1px var(--sapin);border:0;padding:12px 20px}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--sapin);color:var(--ivoire)}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}

/* Ouverture (accueil, une fois par visite) */
.ouverture{position:fixed;inset:0;background:var(--ivoire);z-index:100;display:grid;place-items:center;transition:opacity .6s ease .1s}
.ouverture.fin{opacity:0;pointer-events:none}
.ouverture svg{width:112px;height:112px}
.ouverture .p{transform-box:fill-box}
.ouverture .o-barre{transform-origin:left center;animation:ta-deplie .55s cubic-bezier(.6,0,.2,1) both}
.ouverture .o-fut{transform-origin:center top;animation:ta-descend .5s cubic-bezier(.6,0,.2,1) .35s both}
.ouverture .o-jambe{transform-origin:center top;animation:ta-descend .5s cubic-bezier(.6,0,.2,1) .55s both}
.ouverture .o-detail{animation:ta-apparait .35s ease .95s both}
.ouverture .nom{margin-top:18px;font:500 13px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--sapin);text-align:center;animation:ta-apparait .4s ease 1s both}
@keyframes ta-deplie{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ta-descend{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ta-apparait{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ouverture{display:none}}

/* En-tête */
.entete-site{position:sticky;top:0;z-index:20;background:rgba(246,241,232,.94);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s}
.admin-bar .entete-site{top:32px}
.reperes strong + br,.valeurs strong + br{display:none}
.entete-site.defile{border-bottom-color:var(--filet)}
.barre{display:flex;align-items:center;gap:28px;height:78px}
.marque{display:flex;align-items:center;gap:14px;margin-right:auto}
.marque b{display:block;font:600 19px/1.1 var(--serif);color:var(--sapin)}
.marque small{display:block;font-size:12.5px;color:var(--gris);letter-spacing:.04em}

/* Navigation : liens sur ordinateur, burger sous 1000 px */
.nav-bureau{display:flex;gap:26px;font-size:15px}
.nav-bureau a{position:relative;padding:6px 0}
.nav-bureau a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--bordeaux);transition:right .25s}
.nav-bureau a:hover::after{right:0}
.burger,.menu-fermer{display:none;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:var(--sapin)}
.menu-fermer{display:inline-flex}
.burger-texte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.burger-traits,.croix{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--filet);display:grid;place-content:center;gap:5px;transition:box-shadow .2s}
.burger:hover .burger-traits,.menu-fermer:hover .croix{box-shadow:inset 0 0 0 1px var(--sapin)}
.burger-traits i{display:block;width:16px;height:1px;background:var(--sapin)}
.croix{position:relative}
.croix::before,.croix::after{content:"";position:absolute;left:14px;right:14px;top:50%;height:1px;background:var(--sapin);transform:rotate(45deg)}
.croix::after{transform:rotate(-45deg)}

/* Panneau du menu, plein écran */
.menu-panneau{position:fixed;inset:0;z-index:200;background:var(--ivoire);display:flex;flex-direction:column;padding:0 32px 32px;overflow-y:auto;opacity:0;transition:opacity .35s ease}
.menu-panneau[hidden]{display:none}
.menu-panneau.ouvert{opacity:1}
.menu-ouvert,.menu-ouvert body{overflow:hidden}
.menu-haut{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;flex:none}
.menu-haut .marque{margin:0}
.menu-liens{flex:1;display:flex;align-items:center;padding:24px 0}
.menu-liens ol{list-style:none;margin:0;padding:0;width:100%;border-top:1px solid var(--filet)}
.menu-liens li{border-bottom:1px solid var(--filet);opacity:0;transform:translateY(14px);transition:opacity .45s ease calc(.05s * var(--i) + .1s),transform .45s cubic-bezier(.2,0,.1,1) calc(.05s * var(--i) + .1s)}
.ouvert .menu-liens li{opacity:1;transform:none}
.menu-liens a{display:flex;align-items:baseline;gap:18px;padding:14px 0;font:400 clamp(28px,7vw,44px)/1.1 var(--serif);color:var(--sapin)}
.menu-liens a i{font:italic 400 15px var(--serif);color:var(--bordeaux);min-width:24px}
.menu-liens a:hover span,.menu-liens a[aria-current] span{color:var(--bordeaux)}
.menu-liens a[aria-current] span{font-style:italic}
.menu-bas{flex:none;display:flex;flex-direction:column;gap:18px;font-size:14px;color:var(--gris)}
.menu-bas .bouton{justify-content:center;padding:14px 20px}
@media (prefers-reduced-motion:reduce){.menu-panneau,.menu-liens li{transition:none}}
@media (max-width:640px){.menu-panneau{padding:0 20px 24px}.menu-haut{min-height:66px}.menu-haut .mono{width:36px;height:36px}}

/* Ouverture de page */
.une{padding:72px 0 88px}
.une-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
.une h1{font-size:clamp(40px,5.2vw,66px);line-height:1.06;letter-spacing:-.015em;margin:26px 0}
.chapo{font-size:19px;color:var(--gris);max-width:34em}
.une .actions{margin-top:36px}
.reperes{display:flex;gap:40px;margin-top:48px;padding-top:24px;border-top:1px solid var(--filet);font-size:14px;color:var(--gris)}
.reperes strong{display:block;font-weight:500;font-size:15px;color:var(--encre)}
.portrait{aspect-ratio:4/5;border-radius:4px;background:linear-gradient(160deg,#E7DFD0,#D8CFBE);position:relative;overflow:hidden}
.portrait::before{content:"";position:absolute;right:-40px;top:-30px;width:320px;height:320px;background:url(assets/monogramme-ta.svg) no-repeat center/contain;opacity:.07}
.portrait:has(img)::before{display:none}
.portrait figure{margin:0;height:100%}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.portrait-legende{position:absolute;left:24px;bottom:22px;font-size:13px;line-height:1.5;color:#5F5A50;letter-spacing:.04em}

/* Sections */
.principal section{padding:96px 0}
.principal section.une{padding:72px 0 88px}
.tete{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:44px}
.tete .surtitre::before{width:0}
.tete.vu .surtitre::before{width:40px}
.principal h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-.01em;margin-top:14px;max-width:18em}

/* Domaines */
.domaines{background:var(--papier);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tuile{position:relative;display:flex;flex-direction:column;min-height:228px;padding:28px 28px 26px;border-radius:4px;background:var(--ivoire);box-shadow:inset 0 0 0 1px var(--filet);transition:transform .25s,box-shadow .25s;box-sizing:border-box}
.tuile:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--sapin)}
.tuile .num{font:italic 400 15px var(--serif);color:var(--bordeaux)}
.tuile h3{font-size:24px;line-height:1.18;font-weight:500;margin:14px 0 10px;overflow-wrap:anywhere;hyphens:auto}
.tuile p{font-size:15px;color:var(--gris)}
.tuile .fleche{margin-top:auto;padding-top:18px;font-size:14px;color:var(--sapin)}
.tuile .fleche a::after{content:"";position:absolute;inset:0}
.tuile .fleche a::before{content:"→";float:right;margin-left:10px;transition:transform .25s}
.tuile:hover .fleche a::before{transform:translateX(4px)}
.tuile.sapin{background:var(--sapin);box-shadow:none}
.tuile.sapin h3,.tuile.sapin .fleche{color:var(--ivoire)}
.tuile.sapin p{color:#C9D3C8}
.tuile.sapin .num{color:#E3B9B4}
.tuile.bordeaux{background:var(--bordeaux);box-shadow:none}
.tuile.bordeaux h3,.tuile.bordeaux .fleche{color:#FBF1EE}
.tuile.bordeaux p{color:#E8CFCB}
.tuile.bordeaux .num{color:#F0D7D2}
.tuile.mousse{background:var(--mousse);box-shadow:none}
.tuile.mousse p{color:#4E524B}

/* Qui suis-je */
.moi-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.moi .wp-block-quote{font:italic 400 28px/1.35 var(--serif);color:var(--sapin);border-left:1px solid var(--bordeaux);padding:0 0 0 28px;margin:28px 0 0}
.moi .wp-block-quote p{font:inherit}
.moi-texte > p{color:var(--gris);margin-bottom:16px;max-width:36em}
.valeurs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:36px 0 34px;padding-top:28px;border-top:1px solid var(--filet);font-size:15px;color:var(--gris);line-height:1.5}
.valeurs strong{display:block;font:500 19px var(--serif);color:var(--sapin);margin-bottom:6px}

/* Honoraires */
.honoraires{background:var(--mousse)}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trois > div{background:var(--papier);border-radius:4px;padding:28px}
.trois h3{font-size:21px;line-height:1.25;font-weight:500;margin-bottom:10px}
.trois p{font-size:15px;color:var(--gris)}

/* Articles */
.liste .wp-block-post-template{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid var(--filet);padding:32px 0 0;margin:0;list-style:none}
.liste .meta{font-size:13px;letter-spacing:.04em;color:var(--bordeaux)}
.liste .meta a,.article-seul .meta a{color:inherit;display:inline-block;padding:4px 0}
.liste .wp-block-post-title{font-size:22px;line-height:1.25;font-weight:500;margin:12px 0 10px}
.liste .wp-block-post-title a:hover{text-decoration:underline;text-decoration-color:var(--bordeaux);text-decoration-thickness:1px;text-underline-offset:4px}
.liste .wp-block-post-excerpt{font-size:15px;color:var(--gris)}
.liste .wp-block-post-excerpt__more-text{display:none}
.liste .wp-block-post-excerpt__excerpt{margin:0}

/* Rendez-vous */
.principal section.rdv{padding:0 0 96px}
.page-domaine section.rdv{padding-top:16px}
.cadre{background:var(--sapin);color:var(--ivoire);border-radius:4px;padding:56px 64px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.cadre::before{content:"";position:absolute;right:-60px;bottom:-90px;width:380px;height:380px;background:url(assets/monogramme-ta-clair.svg) no-repeat center/contain;opacity:.08;pointer-events:none}
.cadre > *{position:relative}
.rdv h2{color:var(--ivoire);margin-top:0}
.rdv h2 em{color:#E7BEB8}
.rdv-texte p{color:#C9D3C8;margin-top:14px;max-width:30em}
.rdv .clair .wp-block-button__link{background:var(--ivoire);color:var(--sapin)}
.rdv .clair .wp-block-button__link:hover{background:#fff}
.rdv .coord{margin-top:18px;font-size:15px;color:#C9D3C8;line-height:1.9}
.rdv .coord a{color:var(--ivoire);border-bottom:1px solid rgba(246,241,232,.35)}

/* Pied */
.pied-site{border-top:1px solid var(--filet);padding:48px 0 40px;font-size:14px;color:var(--gris)}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.pied-grille b{display:block;color:var(--encre);font-weight:500;margin-bottom:8px}
.pied-grille .marque b{margin:0}
.pied-grille .legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 24px;border-top:1px solid var(--filet);padding-top:20px;font-size:13px}
.pied-grille .legal a,.pied-grille .legal span{padding:4px 0}

/* Pages : tête et texte */
.tete-page{padding-top:64px;padding-bottom:8px}
.tete-page .surtitre a:hover{color:var(--bordeaux)}
.page-domaine h1,.page-simple h1,.page-articles h1{font-size:clamp(38px,4.8vw,60px);line-height:1.08;letter-spacing:-.015em;margin:22px 0 0}
.page-simple{padding:64px 0 96px}
.page-simple .texte > * + *{margin-top:16px}
.page-simple .texte{margin-top:28px;color:var(--gris)}
.page-simple .texte h2{font-size:28px;margin-top:36px}
.article-seul .meta{font-size:13px;letter-spacing:.04em;color:var(--bordeaux)}
.article-seul .date{margin-top:10px;font-size:14px;color:var(--gris)}
.page-simple .texte a{color:var(--sapin);border-bottom:1px solid var(--bordeaux)}
.page-simple .texte strong{color:var(--encre);font-weight:500}
.page-simple .texte ul{padding-left:1.2em}
.page-simple .texte li + li{margin-top:8px}
.page-simple .texte li ul{margin-top:8px}
.tableau{margin:28px 0 8px;overflow-x:auto}
.tableau table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.tableau th{text-align:left;font:500 15px/1.35 var(--serif);color:var(--sapin);background:var(--papier);border-bottom:1px solid var(--sapin)}
.tableau th,.tableau td{padding:12px 14px;border:0;border-bottom:1px solid var(--filet);vertical-align:top}
.tableau td:first-child{color:var(--encre);font-weight:500;white-space:nowrap}
.portrait-page{margin:0 0 32px;max-width:320px}
.portrait-page img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:4px}
.statut{font-size:14.5px;border-top:1px solid var(--filet);padding-top:16px}
.liste-domaines{list-style:none;padding:0;border-top:1px solid var(--filet)}
.liste-domaines li{padding:16px 0;border-bottom:1px solid var(--filet)}
.liste-domaines a{font:500 21px var(--serif);color:var(--sapin);margin-right:6px}
.liste-domaines a:hover{color:var(--bordeaux)}
.page-articles{padding:64px 0 96px}
.page-articles .liste{margin-top:44px}

/* Page domaine */
.page-domaine section{padding:56px 0}
.page-domaine section.intro{padding-top:28px}
.intro-grille{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:start}
.intro .chapo{font-size:20px;line-height:1.55}
.pour-qui{background:var(--papier);border:1px solid var(--filet);border-radius:4px;padding:24px 26px}
.pour-qui h3{font:500 18px var(--serif);margin-bottom:10px}
.pour-qui ul{margin:0;padding-left:1.1em;color:var(--gris);font-size:15.5px}
.pour-qui li{margin:4px 0}
.page-domaine h2{font-size:clamp(28px,3vw,38px);margin:0 0 32px}
.actes{background:var(--papier);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.actes-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.actes-grille.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.acte{background:var(--ivoire);border-radius:4px;box-shadow:inset 0 0 0 1px var(--filet);padding:24px 24px}
.acte h3{font:500 20px/1.25 var(--serif);margin-bottom:8px}
.acte p{font-size:15px;color:var(--gris)}
.etapes-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:etape}
.etape{border-top:1px solid var(--sapin);padding-top:18px}
.etape .n{font:italic 400 34px/1 var(--serif);color:var(--bordeaux)}
.etape h3{font:500 19px var(--serif);margin:14px 0 6px}
.etape p{font-size:15px;color:var(--gris)}
.questions-grille{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.encart{background:var(--mousse);border-radius:4px;padding:28px}
.encart h3{font:500 21px var(--serif);margin-bottom:10px}
.encart p{font-size:15.5px;color:#41463F}
.encart .lien{margin-top:18px}
.faq h2{margin-bottom:12px}
.questions-grille:not(:has(.faq)){grid-template-columns:minmax(0,620px)}
.wp-block-details{border-bottom:1px solid var(--filet);padding:18px 0}
.wp-block-details summary{cursor:pointer;font:500 19px/1.35 var(--serif);color:var(--sapin);list-style:none;display:flex;justify-content:space-between;gap:20px}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary::after{content:"+";font:300 26px/1 var(--sans);color:var(--bordeaux);transition:transform .25s}
.wp-block-details[open] summary::after{transform:rotate(45deg)}
.wp-block-details p{margin-top:10px;color:var(--gris);font-size:15.5px}
.autres .surtitre{margin-bottom:20px}
.autres-domaines{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.autres-domaines a{display:block;height:100%;box-sizing:border-box;padding:18px 18px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--filet);font:500 17px/1.3 var(--serif);color:var(--sapin);transition:box-shadow .2s,background .2s}
.autres-domaines a:hover{box-shadow:inset 0 0 0 1px var(--sapin);background:var(--papier)}

/* Tablette */
@media (max-width:1000px){
  .nav-bureau,.entete-contact{display:none}
  .burger{display:inline-flex}
  .une-grille,.moi-grille,.cadre,.intro-grille,.questions-grille{grid-template-columns:1fr}
  .une-grille{gap:44px}
  .portrait{aspect-ratio:16/10;order:-1}
  .grille,.actes-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapes-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .autres-domaines{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Mobile : les six domaines tiennent dans un écran */
@media (max-width:640px){
  body{font-size:16px}
  .enveloppe{padding-left:20px;padding-right:20px}
  .barre{height:66px}
  .mono{width:36px;height:36px}
  .marque b{font-size:17px}
  .principal section.une{padding:28px 0 56px}
  .portrait{aspect-ratio:4/3}
  .chapo{font-size:17px}
  .une .actions .wp-block-button{flex:1}
  .une .actions .wp-block-button__link{width:100%;justify-content:center;padding:12px 14px;white-space:nowrap;box-sizing:border-box}
  .reperes{gap:20px;flex-wrap:wrap}
  .principal section{padding:64px 0}
  .tete{flex-direction:column;align-items:start;gap:14px;margin-bottom:28px}
  .grille{gap:10px}
  .tuile{min-height:0;padding:18px 16px 16px}
  .tuile h3{font-size:18px;margin:8px 0 0}
  .tuile > p:not(.num):not(.fleche){display:none}
  .tuile .fleche{padding-top:14px;font-size:0}
  .tuile .fleche a::before{font-size:20px;float:none;margin:0}
  .valeurs,.trois,.liste .wp-block-post-template,.actes-grille,.actes-grille.deux,.etapes-liste{grid-template-columns:1fr}
  .tableau table{font-size:14px;min-width:560px}
  .tableau{margin-right:-20px;padding-right:20px}
  .valeurs{gap:18px}
  .liste .wp-block-post-template{gap:28px}
  .moi .wp-block-quote{font-size:23px}
  .principal section.rdv{padding-bottom:64px}
  .cadre{padding:36px 24px}
  .pied-grille{grid-template-columns:1fr;gap:24px}
  .page-domaine section{padding:40px 0}
  .autres-domaines{grid-template-columns:repeat(2,minmax(0,1fr))}
  .autres-domaines a{overflow-wrap:anywhere;hyphens:auto;padding:14px}
  .tete-page{padding-top:36px}
}

/* Version de relecture (04/11/2026) : bandeau et passages à compléter ou à valider. À retirer à la mise en ligne, avec le bandeau de functions.php. */
.relecture{margin:0;background:var(--bordeaux);color:var(--ivoire);font:500 13px/1.45 var(--sans);text-align:center;padding:10px 20px}
p.a-completer{border:1px dashed var(--bordeaux);background:#F8EDEA;color:var(--encre);padding:12px 16px;border-radius:4px;font:400 15px/1.5 var(--sans)}
p.a-completer strong{color:var(--bordeaux);font-weight:600}
mark.a-completer{background:#F8EDEA;color:var(--bordeaux);border:1px dashed var(--bordeaux);border-radius:3px;padding:1px 6px;font:500 13px/1.6 var(--sans);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.moi p.a-completer{margin-top:20px}