:root{ /* Bleu historique du cabinet, relevé sur l'ancien site : #003366, teinte 210° saturée à 100 %. La teinte est conservée, l'échelle ouverte en clarté pour tenir sur trente-cinq pages, et la saturation maintenue haute : c'est elle qui fait lire le bleu plutôt que le noir. */ --bg:#0B2545; --bg-alt:#0F2C51; --card:#133358; --card-alt:#133358; /* Le sol des sections en alternance. Il était plus sombre que le fond, en complément des sections ivoire qui aéraient la page. Celles-ci retirées, l'alternance ne creusait plus que du sombre sur du sombre : elle remonte donc en clarté. Le pied de page hérite du creux, ce qui lui donne enfin un plan à lui. */ --sol-2:#0F2C51; /* Le bleu pâle des chapôs et des textes d'accompagnement. */ --lede:#AFC5DA; --text:#EAF1F8; --text-2:#AFC5DA; --muted:#99ACC0; --line:#26496F; --brand:#DCBB93; --brand-text:#DCBB93; --link:#DCBB93; --on-brand:#0B2545; --tile:#16406B; } /* Site volontairement en thème clair unique : c'est ce que verront tous les visiteurs de acbc-avocats.com, quel que soit le réglage de leur appareil. */ *{box-sizing:border-box} html{ scroll-behavior:smooth; scroll-padding-top:84px; background:var(--bg); color-scheme:dark; min-height:100%; overscroll-behavior-y:none; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} } body{ margin:0; background:var(--bg); color:var(--text); min-height:100%; overscroll-behavior-y:none; overflow-x:hidden; font-family:Inter,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.55; letter-spacing:-.011em; -webkit-font-smoothing:antialiased; } a{color:inherit} :focus-visible{outline:2px solid var(--link); outline-offset:3px; border-radius:6px} .wrap{max-width:1000px; margin:0 auto; padding:0 24px} .narrow{max-width:720px; margin:0 auto} h1,h2,h3{letter-spacing:-.032em; font-weight:600; margin:0; text-wrap:balance} /* ── La voix de titrage ──────────────────────────────────────────────── Les grands titres sont composés dans le serif déjà utilisé en italique pour les incises : le romain et l'italique d'une même famille, c'est la manière la plus ancienne et la plus sûre de marquer une emphase. Inter tient tout le reste — intertitres, cartes, interface. */ .hero h1,.phead h1,.s-head h2{ font-family:Newsreader,Georgia,"Times New Roman",serif; font-weight:400; font-variant-numeric:oldstyle-nums; } .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--brand-text); margin:0 0 10px; text-transform:none; } .center{text-align:center} em{ font-family:Newsreader,Georgia,serif; font-style:italic; font-weight:300; letter-spacing:-.01em; font-size:1.06em; } .eyebrow .n{color:var(--muted); font-weight:400; margin-right:6px} .cue{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; margin-top:44px; font-size:12px; color:var(--muted); text-decoration:none; letter-spacing:.02em; } .cue i{ display:block; width:1px; height:34px; background:linear-gradient(var(--line),var(--muted)); animation:cueMove 2.6s cubic-bezier(.4,0,.2,1) infinite; } @keyframes cueMove{0%,100%{transform:scaleY(.55); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}} @media (prefers-reduced-motion:reduce){ .cue i{animation:none} } p{margin:0} /* ── Barre de navigation ── */ .nav{ position:sticky; top:0; z-index:70; height:64px; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:saturate(180%) blur(24px); border-bottom:1px solid var(--line); } .nav .wrap{display:flex; align-items:center; gap:clamp(12px,1.7vw,20px); height:64px; max-width:1100px} .brand{display:flex; align-items:center; text-decoration:none; flex:0 0 auto} .nav-links{margin-left:auto; display:flex; gap:clamp(13px,2.1vw,28px); font-size:13px; font-weight:450; color:var(--text-2)} .nav-links .inner{display:contents} .nav-links .rub{display:contents} .nav-links .deplier{display:none} .nav-links a{ text-decoration:none; position:relative; transition:color .3s cubic-bezier(.32,.72,0,1); } .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:1.5px; border-radius:2px; background:currentColor; opacity:.5; transform:scaleX(0); transform-origin:50% 50%; transition:transform .46s cubic-bezier(.32,.72,0,1), opacity .3s ease; } .nav-links a:hover::after, .nav-links a[data-mega].on::after{transform:scaleX(1); opacity:.75} .nav-links a:hover{color:var(--text)} .nav-links a.in-menu{display:none} .nav .cta{font-size:13px; font-weight:500; text-decoration:none; color:var(--link); white-space:nowrap} /* bouton hamburger qui se transforme en croix */ .nav-toggle{ display:none; margin-left:auto; width:38px; height:38px; padding:0; border:0; background:none; cursor:pointer; position:relative; } .nav-toggle span{ position:absolute; left:10px; width:19px; height:1.5px; background:var(--text); border-radius:2px; transition:transform .42s cubic-bezier(.32,.72,0,1), top .28s cubic-bezier(.32,.72,0,1); } .nav-toggle span:nth-child(1){top:16px} .nav-toggle span:nth-child(2){top:22px} .nav-toggle[aria-expanded="true"] span:nth-child(1){top:19px; transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){top:19px; transform:rotate(-45deg)} @media (max-width:880px){ .nav{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg)} .nav-toggle{display:block} .nav .cta{display:none} .nav-links a.in-menu{display:block; color:var(--link); font-weight:500} /* le menu devient une feuille pleine hauteur : c'est elle qui défile, jamais la page derrière */ .nav-links{ position:fixed; top:64px; left:0; right:0; bottom:0; height:auto; margin:0; padding:14px 24px 28px; display:flex; flex-direction:column; background:var(--bg); box-shadow:0 18px 36px rgba(11,37,69,.45); opacity:0; visibility:hidden; transform:translateY(-10px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)); transition:opacity .3s ease, transform .38s cubic-bezier(.32,.72,0,1), visibility 0s linear .38s; } .nav-links .inner{display:flex; flex-direction:column; min-height:0; padding-bottom:10px} .nav-links.open{ opacity:1; visibility:visible; transform:none; transition:opacity .24s ease, transform .38s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s; } .nav-links a{ padding:18px 0; border-bottom:1px solid var(--line); font-size:19px; font-weight:500; color:var(--text); letter-spacing:-.02em; opacity:0; transform:translateY(-12px); transition:opacity .34s ease, transform .46s cubic-bezier(.32,.72,0,1); } .nav-links a::after{display:none} .nav-links .inner a:last-child{border-bottom:none} .nav-links.open a{opacity:1; transform:none} .nav-links.open .inner a:nth-child(1){transition-delay:.07s} .nav-links.open .inner a:nth-child(2){transition-delay:.11s} .nav-links.open .inner a:nth-child(3){transition-delay:.15s} .nav-links.open .inner a:nth-child(4){transition-delay:.19s} .nav-links.open .inner a:nth-child(5){transition-delay:.23s} .nav-links.open .inner a:nth-child(6){transition-delay:.27s} } body.nav-open{overflow:hidden; touch-action:none} body.nav-open .cta-bar{transform:translateY(115%)!important} /* apparition progressive au défilement */ .reveal{ opacity:0; transform:translateY(20px); transition:opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1); } .reveal.in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ .reveal,.reveal.in{opacity:1; transform:none; transition:none} .nav-links,.nav-links a,.nav-toggle span{transition:none} } /* ── Parallaxe sur l'image d'ouverture ── */ .parallax{overflow:hidden; border-radius:28px} .parallax > *{will-change:transform} @media (max-width:700px){ .parallax{border-radius:20px} } /* ── Section épinglée ── */ .pin{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:64px; align-items:start} .pin .stick{position:sticky; top:116px} .pin .stick h2{font-size:clamp(30px,4.2vw,44px); line-height:1.08} .pin .stick p{margin:16px 0 26px; color:var(--text-2); font-size:19px; font-weight:300; max-width:34ch} .flow{display:flex; flex-direction:column} .flow .item{padding:46px 0; border-top:1px solid var(--line)} .flow .item:first-child{border-top:none; padding-top:0} .flow .item b{display:block; font-size:13px; font-weight:600; color:var(--brand-text); margin-bottom:10px} .flow .item h3{font-size:26px; line-height:1.15; margin-bottom:10px} .flow .item p{color:var(--text-2); font-size:17px; font-weight:300; max-width:44ch} @media (max-width:880px){ .pin{grid-template-columns:1fr; gap:36px} .pin .stick{position:static} .flow .item{padding:32px 0} .flow .item h3{font-size:22px} } /* ── Barre d'action collante ── */ .cta-bar{ position:fixed; left:0; right:0; bottom:0; z-index:65; background:color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter:saturate(180%) blur(20px); border-top:1px solid var(--line); padding:11px 24px; display:flex; align-items:center; justify-content:center; gap:18px; transform:translateY(115%); transition:transform .5s cubic-bezier(.32,.72,0,1); } .cta-bar.show{transform:none} .cta-bar span{font-size:14px; color:var(--text-2)} .cta-bar .btn{padding:9px 20px; font-size:14px} @media (max-width:560px){ .cta-bar span{display:none} } @media (prefers-reduced-motion:reduce){ .cta-bar{transition:none} } /* ── Boutons ── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:500; letter-spacing:-.01em; text-decoration:none; padding:12px 24px; border-radius:980px; border:1px solid transparent; cursor:pointer; transition:.18s ease; font-family:inherit; } .btn-fill{background:var(--brand-text); color:#FFFFFF} .btn-fill:hover{opacity:.88} .btn-outline{border-color:var(--brand-text); color:var(--brand-text)} .btn-outline:hover{background:var(--brand-text); color:#FFFFFF} .btn-or{background:var(--brand-text); border-color:var(--brand-text); color:var(--on-brand)} .btn-or:hover{opacity:.88; color:var(--on-brand)} .lnk{color:var(--link); text-decoration:none; font-size:16px; font-weight:400} .lnk::after{content:" ↗"; font-size:.9em} .lnk:hover{text-decoration:underline} /* ── Sections ── */ section.s{padding:104px 0} /* L'alternance des sections joue sur les deux fonds de la charte : #0B2545 et #0F2C51. L'écart est volontairement faible — c'est un changement de plan, pas un changement de page — et les filets font le reste. */ section.s.alt{--bg:#0F2C51; --line:#2C507A; background:var(--bg)} /* ── Le sol clair, retiré ────────────────────────────────────────────── Une section sur deux passait à l'ivoire pour aérer la lecture. Décision du 28 septembre 2026 : le cabinet tient au bleu de bout en bout. La classe « clair » reste posée dans le HTML mais ne repeint plus rien — rétablir la respiration ivoire tiendrait donc en un seul bloc de règles, sans toucher aux soixante-huit pages. */ @media (max-width:700px){ section.s{padding:72px 0} } .s-head{margin-bottom:52px} .s-head h2{font-size:clamp(33px,5vw,50px); line-height:1.06; letter-spacing:-.02em} .s-head p.sub{margin:16px auto 0; color:var(--text-2); font-size:19px; font-weight:300; max-width:46ch} /* ── Hero ── */ .hero{padding:88px 0 64px; text-align:center} @media (max-width:700px){ .hero{padding:56px 0 44px} } .hero h1{font-size:clamp(42px,7.6vw,78px); line-height:1.04; letter-spacing:-.026em; font-weight:400; max-width:17.5ch; margin:0 auto} .hero p.lede{margin:22px auto 0; font-size:clamp(19px,2.3vw,23px); font-weight:300; color:var(--text-2); max-width:40ch; line-height:1.42} .hero .links{display:flex; flex-wrap:wrap; gap:26px; justify-content:center; margin-top:26px} /* ── Tuile ── */ .tile{ background:var(--tile); color:#FFFFFF; border-radius:28px; padding:56px 44px; text-align:center; } @media (max-width:700px){ .tile{padding:40px 24px; border-radius:20px} } .tile h2{font-size:clamp(26px,3.6vw,38px); line-height:1.1} .tile .btn{margin-top:30px} .lnk.suite{display:inline-block; margin-top:12px} .tile p{margin:16px auto 0; color:var(--lede); font-size:18px; font-weight:300; max-width:44ch} .slots{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:30px 0 26px} .slot{ font-size:14px; font-weight:400; color:#FFFFFF; padding:10px 18px; border-radius:980px; border:1px solid rgba(255,255,255,.32); background:transparent; cursor:pointer; font-family:inherit; transition:.15s ease; text-decoration:none; display:inline-block; } .slot:hover{border-color:#FFFFFF} .slot[aria-pressed="true"]{background:#FFFFFF; color:#0B2545; border-color:#FFFFFF} .tile .fine{margin-top:20px; font-size:13px; color:#AFC5DA; max-width:52ch; margin-left:auto; margin-right:auto} /* ── Emplacements photo ── */ .photo{ background:linear-gradient(140deg,#EAF1F8 0%,#AFC5DA 100%); border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; padding:22px; color:#AFC5DA; border:1px dashed #AFC5DA; } .photo .ph-t{font-size:14px; font-weight:600; letter-spacing:-.01em} .photo .ph-s{font-size:12px; color:#AFC5DA; max-width:34ch; line-height:1.5} .photo.wide{aspect-ratio:21/9; border-radius:28px} .photo.square{aspect-ratio:1} .photo.four3{aspect-ratio:4/3} img.ph{display:block; width:100%; height:auto; border-radius:20px; object-fit:cover; border:1px solid var(--line); background:var(--card)} img.ph.four3{aspect-ratio:4/3} img.ph.wide{aspect-ratio:21/9; border-radius:0; border:0} img.ph.square{aspect-ratio:1} img.ph.pt{aspect-ratio:4/5; border-radius:16px} img.ph.bandeau{aspect-ratio:2/1; border-radius:24px} @media (max-width:700px){ img.ph.bandeau{aspect-ratio:16/10; border-radius:18px} } .membre img.ph{margin-bottom:16px} .mini img.ph{margin-bottom:14px} .lieux{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,45%),1fr)); gap:12px; margin-top:40px} .lieux img{border-radius:14px} @media (max-width:700px){ .photo.wide{aspect-ratio:16/10; border-radius:20px} } /* ── Grilles de cartes ── */ .grid{display:grid; gap:20px} .grid > *{min-width:0} .g3{grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(min(212px,100%),1fr))} .card{ background:var(--card-alt); border-radius:20px; padding:34px 30px; display:flex; flex-direction:column; gap:12px; } /* Les cartes d'une même rangée ont la même hauteur : on y cale les pastilles et le lien sur le bas, si bien qu'ils se posent à la même hauteur d'une carte à l'autre, qu'un titre tienne sur une ligne ou sur deux. La grille imbriquée (subgrid) faisait le même travail mais se décalait d'une ligne sur certaines pages, et le lien passait par-dessus les pastilles. */ .grid.gcartes{row-gap:12px} .grid.gcartes > .card{display:flex; flex-direction:column} .grid.gcartes > .card .tags{margin-top:auto} .grid.gcartes > .card .lnk{margin-top:16px!important} section.alt .card{background:var(--card)} .card h3{font-size:20px; line-height:1.2} .card p{color:var(--text-2); font-size:16px; font-weight:300; line-height:1.5} /* Les listes de pastilles démarrent toutes à la même hauteur ; c'est le lien de bas de carte qui va chercher le pied, de sorte qu'une carte à cinq entrées ne décale pas toute la rangée. */ .card .tags{display:grid; grid-template-columns:1fr; grid-auto-rows:auto; align-items:stretch; gap:7px; margin-top:18px; padding-top:12px} .card .tags span,.card .tags a{font-size:12px; text-decoration:none; color:var(--muted); border:1px solid var(--line); border-radius:980px; padding:7px 13px; min-height:0; display:flex; align-items:center; justify-content:flex-start; text-align:left; center; text-align:center; line-height:1.25; overflow-wrap:anywhere; box-sizing:border-box} section.alt .card .tags span,.card .tags a{border-color:var(--line)} /* ── Offres ── */ .offre{background:var(--card-alt); border-radius:20px; padding:38px 30px; display:flex; flex-direction:column; gap:16px} section.alt .offre{background:var(--card)} .offre.hot{background:var(--tile); color:#FFFFFF} .offre .kick{font-size:13px; font-weight:600; color:var(--brand-text)} .offre.hot .kick{color:#AFC5DA} .offre h3{font-size:23px} .offre .price{font-size:16px; font-weight:500; color:var(--text-2)} .offre.hot .price{color:var(--lede)} .offre > p{color:var(--text-2); font-size:16px; font-weight:300} .offre.hot > p{color:var(--lede)} .offre ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; font-size:15.5px; font-weight:300; color:var(--text-2)} .offre.hot ul{color:#EAF1F8} .offre li{padding-left:20px; position:relative; line-height:1.45} .offre li::before{content:"·"; position:absolute; left:6px; font-weight:700; color:var(--brand-text)} .offre.hot li::before{color:#AFC5DA} .offre .btn{margin-top:auto} /* ── Équipe ── */ .membre{display:flex; flex-direction:column; gap:14px; text-align:center} /* Les fiches d'un même groupe partagent les lignes de la grille : Formation, Parcours, Intervient sur, Secteurs et le courriel se posent à la même hauteur d'une fiche à l'autre, quelle que soit la longueur des textes. */ .grid.gmembres{column-gap:20px; row-gap:14px} .grid.gmembres > .membre{display:grid; grid-template-rows:subgrid; grid-row:span 8; gap:0} .portrait{ aspect-ratio:1; border-radius:20px; background:var(--card-alt); display:grid; place-items:center; font-size:34px; font-weight:500; color:var(--brand-text); letter-spacing:-.02em; } section.alt .portrait{background:var(--card)} .membre h3{font-size:18px} .membre .role{font-size:14px; color:var(--brand-text); font-weight:500} .membre p{font-size:15px; font-weight:300; color:var(--text-2)} .membre a{font-size:14px; color:var(--link); text-decoration:none; overflow-wrap:anywhere} /* ── Actualités ── */ .actu{ background:var(--card-alt); border-radius:20px; padding:32px 28px; display:flex; flex-direction:column; gap:12px; text-decoration:none; } section.alt .actu{background:var(--card)} .actu .meta{font-size:13px; color:var(--muted)} .actu h3{font-size:19px; line-height:1.25} .actu p{font-size:15.5px; font-weight:300; color:var(--text-2)} .actu span.more{color:var(--link); font-size:15px; margin-top:auto; padding-top:6px} .actu span.more::after{content:" ↗"; font-size:.9em} /* ── Formulaire ── */ .formcard{background:var(--card); border-radius:24px; padding:44px 40px; border:1px solid var(--line)} section.alt .formcard{background:var(--bg)} @media (max-width:600px){ .formcard{padding:30px 22px; border-radius:18px} } .field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px} .field label{font-size:13px; font-weight:500; color:var(--text-2)} .field input,.field select,.field textarea{ font-family:inherit; font-size:16px; color:var(--text); background:var(--bg-alt); border:1px solid transparent; border-radius:12px; padding:13px 15px; width:100%; } section.alt .field input,section.alt .field select,section.alt .field textarea{background:var(--bg-alt); border-color:var(--line)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--link); outline:none} .field textarea{resize:vertical; min-height:96px} .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px} @media (max-width:560px){ .row2{grid-template-columns:1fr} } .formcard .btn{width:100%; margin-top:8px} .fstatus{display:none; margin-top:16px; font-size:15px; color:var(--text-2); background:var(--bg-alt); border-radius:12px; padding:14px 16px} .fstatus.show{display:block} .fnote{margin-top:16px; font-size:13px; color:var(--muted); line-height:1.5} /* ── Étapes ── */ .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:26px; margin-top:12px} .step{display:flex; flex-direction:column; gap:8px} .step b{font-size:13px; font-weight:600; color:var(--brand-text)} .step p{font-size:15.5px; font-weight:300; color:var(--text-2)} /* ── Contact ── */ .bureau{text-align:center; display:flex; flex-direction:column; gap:6px} .bureau h3{font-size:19px} .bureau p{font-size:15.5px; font-weight:300; color:var(--text-2)} .bureau a{color:var(--link); text-decoration:none; font-size:15px} /* ── Pied de page ── */ footer{background:var(--card); padding:44px 0 104px; font-size:12px; color:var(--text-2); line-height:1.7; position:relative} /* Le pied de page repose sur le même sol que les sections sombres : le même liseré que celui qui sépare les sections lui rend sa frontière. */ footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(220,187,147,.34) 22%, rgba(220,187,147,.34) 78%, transparent); } footer .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:28px; padding-bottom:26px; border-bottom:1px solid var(--line)} footer .fcol{font-size:12px; font-weight:600; color:var(--text); margin:0 0 10px} footer ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px} /* ── Confort tactile ────────────────────────────────────────────────── Au doigt, un lien de 15 px de haut se rate une fois sur trois. Sous 760 px, les liens de listes et la bascule de langue reçoivent de quoi atteindre les 24 px recommandés, sans bouger d'un pixel sur écran. */ @media (max-width:760px){ footer .cols li a, footer .legal a, .nav-links .sub a{ display:inline-block; padding-block:5px; } .lang [data-lang][data-lang]{display:inline-block; padding:6px 8px} .lang{gap:2px} } footer a{text-decoration:none} footer a:hover{text-decoration:underline} footer .legal{padding-top:22px; color:var(--muted)} footer .legal p{margin-bottom:9px; max-width:100ch} .todo{color:#AC7C44; border-bottom:1px dotted currentColor; overflow-wrap:anywhere} /* ── Panneau déroulant au survol ── */ .nav{overflow:visible} .nav-links a[data-mega].on{color:var(--text)} .mega{ position:absolute; top:64px; left:0; right:0; z-index:69; display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows .72s cubic-bezier(.22,.68,0,1), opacity .4s ease, visibility 0s linear .72s; } .mega.open{ grid-template-rows:1fr; opacity:1; visibility:visible; transition:grid-template-rows .72s cubic-bezier(.22,.68,0,1), opacity .3s ease, visibility 0s linear 0s; } .mega-inner{ min-height:0; overflow:hidden; background:color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter:saturate(180%) blur(24px); border-bottom:1px solid var(--line); box-shadow:0 22px 44px rgba(11,37,69,.34); } .mega-panel{display:none; padding:34px 24px 40px} .mega-panel.active{display:block} .mega-panel .cols{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px 40px; } .mega-panel .lbl{font-size:11px; letter-spacing:.06em; color:var(--muted); margin-bottom:12px; font-weight:500} .mega-panel ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px} .mega-panel li{ opacity:0; transform:translateY(-12px); transition:opacity .5s ease, transform .68s cubic-bezier(.22,.68,0,1); } .mega.open .mega-panel.active li{opacity:1; transform:none} .mega.open .mega-panel.active.prep li{opacity:0; transform:translateY(-12px); transition:none} .mega-panel a{text-decoration:none; color:var(--text); font-size:17px; font-weight:400; letter-spacing:-.02em; transition:color .15s} .mega-panel a:hover{color:var(--brand-text)} .mega-panel .hint{ max-width:1000px; margin:26px auto 0; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); } .mega-panel .hint a{font-size:13.5px; color:var(--link)} @media (max-width:880px){ .mega{display:none} } .nav-links .sub{display:flex; flex-direction:column; padding:0 0 12px 2px; border-bottom:1px solid var(--line)} .nav-links .sub a{padding:9px 0; border:0; font-size:14.5px; font-weight:400; color:var(--text-2)} @media (min-width:881px){ .nav-links .sub{display:none} } /* ── Adresse cliquable ── */ .adr{ color:var(--text-2); text-decoration:none; border-bottom:1px solid transparent; display:inline-block; transition:.15s; } .adr:hover{color:var(--brand-text); border-bottom-color:var(--brand-text)} .adr::after{content:" ↗"; font-size:.82em; color:var(--muted)} /* ── Formulaire par étapes ── */ .fstep-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px} .fstep-head .lbl{font-size:12px; letter-spacing:.09em; color:var(--brand-text); font-weight:600; text-transform:uppercase} .fstep-head .no{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums} .fbar{height:3px; background:#26496F; border-radius:99px; overflow:hidden; margin-bottom:28px} .fbar i{display:block; height:100%; width:25%; background:var(--brand-text); transition:width .45s cubic-bezier(.32,.72,0,1); box-shadow:0 0 12px rgba(175,197,218,.45)} .fstep{display:none} .fstep.active{display:block; animation:stepIn .38s cubic-bezier(.22,.61,.36,1) both} @keyframes stepIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .fstep.active{animation:none} .fbar i{transition:none} } .opts{display:flex; flex-direction:column; gap:8px; margin-bottom:2px} .opt-row{ position:relative; display:grid; grid-template-columns:26px 1fr 20px; align-items:center; gap:14px; padding:15px 16px; border:1px solid #26496F; border-radius:14px; cursor:pointer; transition:.15s; } .opt-row:hover{border-color:#2C507A; background:rgba(175,197,218,.04)} .opt-row input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none} .opt-row .n{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums} .opt-row .t{font-size:16.5px; font-weight:400; letter-spacing:-.02em; color:var(--text)} .opt-row .dot{ width:16px; height:16px; border-radius:50%; border:1.5px solid #2C507A; position:relative; transition:.18s; justify-self:end; } .opt-row input:checked ~ .dot{border-color:var(--brand-text)} .opt-row input:checked ~ .dot::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--brand-text)} .opt-row input:checked ~ .t{color:var(--brand-text)} .opt-row:has(input:checked){border-color:var(--brand-text); background:rgba(175,197,218,.08)} .opt-row input:focus-visible ~ .t{outline:2px solid var(--link); outline-offset:3px; border-radius:3px} .fnav{ display:flex; align-items:center; gap:14px; margin-top:30px; padding-top:22px; border-top:1px solid #16406B; } .fnav .back{font:inherit; font-size:14px; background:none; border:0; color:var(--muted); cursor:pointer; padding:8px 0} .fnav .back:hover{color:var(--text)} .fnav .next{margin-left:auto; padding:13px 30px; font-size:15px} .ferr{color:#DCBB93; font-size:14px; margin-top:12px; display:none} .ferr.show{display:block} .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .recap{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px} .recap span{ font-size:12.5px; color:var(--brand-text); border:1px solid #2C507A; background:rgba(175,197,218,.07); border-radius:999px; padding:5px 13px; } .done{display:none; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:26px 10px 14px} .done.show{display:flex; animation:stepIn .4s cubic-bezier(.22,.61,.36,1) both} .done-mark{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:rgba(175,197,218,.12); color:var(--brand-text); border:1px solid #2C507A; } .done h3{font-size:21px; font-weight:500} .done p{font-size:15px; color:var(--text-2); font-weight:300; max-width:46ch} /* ── Bloc Calendly ── */ .cly-lead{font-size:16px; color:var(--text-2); font-weight:300; margin-bottom:20px; max-width:56ch} /* Le panneau de renvoi vers l'agenda. Pas de cadre externe : le bouton ouvre Calendly dans un onglet, donc aucune requête ne part vers un tiers tant que le visiteur n'a pas cliqué, et aucun consentement n'est requis pour afficher le bloc. */ .cly-bloc{border:1px solid var(--brand-text); border-radius:16px; padding:24px 22px; background:transparent; text-align:center} .cly-bloc .cly-h{font-size:17px; font-weight:500; margin:0 0 6px} .cly-bloc .cly-p{font-size:14.5px; color:var(--text-2); font-weight:300; margin:0 0 18px; max-width:44ch; margin-inline:auto} .cly-bloc .cly-f{font-size:12.5px; color:var(--muted); font-weight:300; margin:14px 0 0} /* Dans la colonne de droite, le bloc suivait les numéros de téléphone sans rien qui l'en sépare. Fond plein et texte centré : il se lit comme une proposition, pas comme la suite de la liste. */ .cly-bloc.compact{padding:22px 18px; text-align:center; background:transparent; border:1px solid var(--brand-text); margin-top:auto} .cly-bloc.compact .cly-h{font-size:15.5px} .cly-bloc.compact .cly-p{font-size:13.5px; margin-bottom:16px} /* Le cadre de l'agenda n'existe pas tant que le visiteur n'a pas accepté : il est fabriqué par le script, de sorte qu'aucune requête ne parte vers Calendly avant l'accord. */ /* ── Bascule de langue ── */ .lang{display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.08em; font-weight:500} .lang [data-lang]{ background:none; border:0; padding:2px 0; font:inherit; cursor:pointer; color:var(--muted); text-decoration:none; transition:color .15s; } .lang [data-lang]:hover{color:var(--text)} .lang [data-lang][aria-current="true"]{color:var(--text); font-weight:600} .lang .sep{color:var(--line)} /* ── Pages ── */ .page{display:none} .page.active{display:block; animation:pageIn .42s cubic-bezier(.22,.61,.36,1) both} @keyframes pageIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .page.active{animation:none} .menu-list a{transition:none} } /* bandeau de titre des pages intérieures */ .phead{background:var(--tile); color:#FFFFFF; padding:76px 0 60px} .phead .crumb{font-size:12px; letter-spacing:.06em; color:#AFC5DA; margin-bottom:14px} .phead .crumb a{color:#AFC5DA; text-decoration:none} .phead .crumb a:hover{color:#FFFFFF} .phead h1{font-size:clamp(35px,5.8vw,58px); line-height:1.04; letter-spacing:-.022em; font-weight:400; max-width:18ch} .phead h1 em{color:#AFC5DA; font-family:Newsreader,Georgia,serif; font-style:italic; font-weight:300} .phead p{margin-top:18px; color:var(--lede); font-size:18.5px; font-weight:300; max-width:52ch} @media (max-width:700px){ .phead{padding:52px 0 44px} } /* page anglaise */ .en-note{border-left:3px solid var(--brand-text); padding:14px 20px; background:var(--bg-alt); color:var(--text-2); font-size:15.5px; margin-top:28px} /* ── Ajustements propres au fond sombre ── */ .btn-fill{background:var(--brand-text); color:#0B2545} .btn-fill:hover{filter:brightness(1.08); opacity:1} .btn-outline{border-color:#2C507A; color:var(--text)} .btn-outline:hover{background:var(--brand-text); color:#0B2545; border-color:var(--brand-text)} .photo{background:linear-gradient(140deg,#133358 0%,#0F2C51 100%); border-color:#26496F; color:#8098B0} .photo .ph-s{color:#AFC5DA} /* Le filet sous le bandeau de titre était laissé au hasard : les pages dont la première section était claire recevaient en plus le liseré doré, les autres non. Il est désormais porté par le bandeau lui-même, donc identique partout. */ .phead{position:relative; border-bottom:0} .phead::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(220,187,147,.34) 22%, rgba(220,187,147,.34) 78%, transparent); } .phead + section.alt::before{display:none} .tile{border:1px solid #26496F} .card,.offre,.actu{border:1px solid #16406B} .offre.hot{background:#16406B; border-color:#2C507A} .card .tags span,.card .tags a,section.alt .card .tags span,section.alt .card .tags a{border-color:#2C507A; color:#DCBB93} .formcard{border-color:#16406B} .field input,.field select,.field textarea, section.alt .field input,section.alt .field select,section.alt .field textarea{ background:#0B2545; border-color:#26496F; color:var(--text); } .fstatus{background:#0B2545} @media (max-width:880px){ /* Le fond n'appartient qu'au tiroir du menu : sur écran large la barre est translucide et floutée, un fond plein y dessinerait un rectangle. */ .nav-links{background:var(--bg)} .nav-links{box-shadow:0 18px 36px rgba(11,37,69,.55)} } .cue i{background:linear-gradient(#16406B,#AFC5DA)} .todo{color:#DCBB93} footer{background:var(--card); --line:#2C507A} .en-note{background:#0F2C51} /* ════════ Finitions : formulaire, consentement, module Calendly ════════ */ .formcard{ background:var(--card); border:1px solid #26496F; border-radius:26px; padding:38px 38px 30px; box-shadow:0 24px 60px rgba(11,37,69,.34); } @media (max-width:600px){ .formcard{padding:26px 20px 22px; border-radius:20px} } .fstep-head .lbl{color:var(--brand-text)} .fbar{height:3px; background:#26496F} .fbar i{box-shadow:0 0 12px rgba(175,197,218,.45)} .fstep > h3{font-size:24px; font-weight:500; margin-bottom:22px} .opts{gap:8px; margin-bottom:2px} .opt-row{ grid-template-columns:26px 1fr 20px; gap:14px; padding:15px 16px; border:1px solid #26496F; border-top:1px solid #26496F; border-radius:14px; } .opt-row:last-of-type{border-bottom:1px solid #26496F} .opt-row:hover{border-color:#2C507A; background:rgba(175,197,218,.04)} .opt-row:has(input:checked){border-color:var(--brand-text); background:rgba(175,197,218,.08)} .opt-row .t{font-size:16.5px} .field label{font-size:12.5px; letter-spacing:.02em; color:var(--muted); font-weight:500} .field input,.field select,.field textarea{ background:#0B2545; border:1px solid #26496F; border-radius:14px; padding:14px 16px; font-size:16px; transition:border-color .18s, box-shadow .18s; } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brand-text); box-shadow:0 0 0 3px rgba(175,197,218,.16); outline:none; } .field input::placeholder,.field textarea::placeholder{color:#2C507A} .recap{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px} .recap span{ font-size:12.5px; color:var(--brand-text); border:1px solid #2C507A; background:rgba(175,197,218,.07); border-radius:999px; padding:5px 13px; } .fnav{border-top:1px solid #16406B; margin-top:30px; padding-top:22px} .fnav .next{padding:13px 30px; font-size:15px} .done{ display:none; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:26px 10px 14px; } .done.show{display:flex; animation:stepIn .4s cubic-bezier(.22,.61,.36,1) both} .done-mark{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:rgba(175,197,218,.12); color:var(--brand-text); border:1px solid #2C507A; } .done h3{font-size:21px; font-weight:500} .done p{font-size:15px; color:var(--text-2); font-weight:300; max-width:46ch} /* module de réservation */ .gated{ border:1px solid #26496F; border-radius:22px; padding:34px 26px; gap:14px; background:linear-gradient(180deg,#0F2C51 0%,#0F2C51 100%); } .gated h3{font-size:19px; font-weight:500} /* bandeau de consentement */ .reseau-slots{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; align-items:stretch; gap:10px; max-width:620px; margin:30px 0 26px; } /* ── Schéma du réseau ── */ .reseau-fig{margin:34px auto 8px; max-width:880px} .reseau-fig svg.schema-compact{max-width:330px; margin:0 auto} .reseau-fig svg{display:block; width:100%; height:auto; overflow:visible} .reseau-fig figcaption{margin-top:10px; font-size:13px; color:#AFC5DA; text-align:center} .reseau-fig .rayon{stroke-dasharray:320; stroke-dashoffset:320; transition:stroke-dashoffset 1.15s cubic-bezier(.22,.68,0,1)} .reseau-fig.on .rayon{stroke-dashoffset:0} .reseau-fig .rayon:nth-of-type(1){transition-delay:.05s} .reseau-fig .rayon:nth-of-type(2){transition-delay:.17s} .reseau-fig .rayon:nth-of-type(3){transition-delay:.29s} .reseau-fig .rayon:nth-of-type(4){transition-delay:.41s} .reseau-fig .rayon:nth-of-type(5){transition-delay:.53s} .reseau-fig .rayon:nth-of-type(6){transition-delay:.65s} .reseau-fig .noeud{opacity:0; transform:translate(0,10px); transition:opacity .55s ease, transform .7s cubic-bezier(.22,.68,0,1)} .reseau-fig.on .noeud{opacity:1; transform:none} .reseau-fig.on .noeud:nth-of-type(1){transition-delay:.45s} .reseau-fig.on .noeud:nth-of-type(2){transition-delay:.57s} .reseau-fig.on .noeud:nth-of-type(3){transition-delay:.69s} .reseau-fig.on .noeud:nth-of-type(4){transition-delay:.81s} .reseau-fig.on .noeud:nth-of-type(5){transition-delay:.93s} .reseau-fig.on .noeud:nth-of-type(6){transition-delay:1.05s} .reseau-fig .halo{opacity:0; transition:opacity 1.3s ease .25s} .reseau-fig.on .halo{opacity:1} .reseau-fig .coeur{opacity:0; transform:scale(.92); transform-origin:450px 280px; transition:opacity .7s ease, transform .9s cubic-bezier(.22,.68,0,1)} .reseau-fig.on .coeur{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ .reseau-fig .rayon{stroke-dashoffset:0} .reseau-fig .noeud,.reseau-fig .halo,.reseau-fig .coeur{opacity:1; transform:none; transition:none} } .reseau-fig .schema-compact{display:block} .reseau-fig .schema-large{display:none} @media (min-width:781px){ .reseau-fig .schema-compact{display:none} .reseau-fig .schema-large{display:block} } .reseau-slots{display:none} .reseau-slots .slot{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:46px; padding:10px 16px; line-height:1.3; box-sizing:border-box; overflow-wrap:anywhere; } /* ── Système visuel dessiné ── */ .hero{position:relative; overflow:hidden} .hero .wrap{position:relative; z-index:2} .hero::before{ content:""; position:absolute; left:-15%; right:-15%; top:-40%; height:170%; z-index:0; pointer-events:none; background: radial-gradient(46% 40% at 22% 22%, rgba(220,187,147,.17), transparent 62%), radial-gradient(40% 36% at 82% 12%, rgba(128,152,176,.13), transparent 64%), radial-gradient(60% 50% at 55% 96%, rgba(19,51,88,.65), transparent 72%); animation:derive 34s ease-in-out infinite alternate; } .hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background-image: linear-gradient(rgba(220,187,147,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(220,187,147,.055) 1px, transparent 1px); background-size:68px 68px; -webkit-mask-image:radial-gradient(110% 82% at 50% 4%, #000 26%, transparent 76%); mask-image:radial-gradient(110% 82% at 50% 4%, #000 26%, transparent 76%); } @keyframes derive{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-3%,2%,0) scale(1.08)} } @media (prefers-reduced-motion: reduce){ .hero::before{animation:none} } /* filet lumineux en tête des sections claires */ section.alt{position:relative} section.alt::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(220,187,147,.34) 22%, rgba(220,187,147,.34) 78%, transparent); } /* bande d'image pleine largeur sous le hero : même filet qu'en tête de section, et le même espace de part et d'autre de l'image */ .bande{position:relative; padding:88px 0} .bande::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(220,187,147,.34) 22%, rgba(220,187,147,.34) 78%, transparent); } @media (max-width:700px){ .bande{padding:64px 0} } /* monogrammes en attendant les portraits */ .photo.mono{ position:relative; overflow:hidden; border-style:solid; border-color:var(--line); background:linear-gradient(152deg,#16406B 0%,#0B2545 68%); justify-content:center; padding:0; } .photo.mono::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(122deg, rgba(220,187,147,.055) 0 1px, transparent 1px 14px); } .photo.mono::after{ content:""; position:absolute; width:150%; aspect-ratio:1; left:-25%; bottom:-92%; border-radius:50%; border:1px solid rgba(220,187,147,.16); } .photo.mono b{ position:relative; font-family:Archivo,Inter,sans-serif; font-weight:700; letter-spacing:-.05em; font-size:clamp(38px,7vw,58px); color:rgba(234,241,248,.17); line-height:1; } .photo.mono i{ position:absolute; bottom:12px; left:0; right:0; font-style:normal; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } /* couvertures d'articles */ .cover{ border-radius:24px; overflow:hidden; margin-bottom:34px; background:var(--tile); border:1px solid var(--line); aspect-ratio:21/8; display:block; width:100%; } .cover svg{display:block; width:100%; height:100%} @media (max-width:640px){ .cover{aspect-ratio:16/9; border-radius:18px} } /* liseré de catégorie sur les brèves */ .actu{position:relative} .actu::before{ content:""; position:absolute; left:22px; right:22px; top:0; height:2px; border-radius:0 0 2px 2px; background:linear-gradient(90deg, var(--brand), transparent); opacity:.5; transition:opacity .25s; } .actu:hover::before{opacity:1} /* ── Pages détaillées (secteurs et domaines) ── */ .det{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:18px} .det article{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px 24px 22px} .det h3{font-size:17px; font-weight:500; margin:0 0 9px; letter-spacing:-.01em} .det p{margin:0; font-size:14.8px; line-height:1.7; color:var(--text-2)} .etapes{counter-reset:et; max-width:78ch; margin:0 auto} .etapes .e{display:grid; grid-template-columns:44px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--line)} .etapes .e:last-child{border-bottom:1px solid var(--line)} .etapes .e::before{counter-increment:et; content:counter(et,decimal-leading-zero); font-size:12px; letter-spacing:.06em; color:var(--brand-text); padding-top:4px; font-variant-numeric:tabular-nums} .etapes h3{font-size:16.5px; font-weight:500; margin:0 0 6px} .etapes p{margin:0; color:var(--text-2); font-size:14.8px; line-height:1.7} .faq{max-width:78ch; margin:0 auto} .faq details{border-top:1px solid var(--line)} .faq details:last-of-type{border-bottom:1px solid var(--line)} .faq summary{list-style:none; cursor:pointer; padding:20px 34px 20px 0; position:relative; font-size:16.5px; font-weight:400; color:var(--text); transition:color .2s} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--brand-text)} .faq summary::after{content:""; position:absolute; right:6px; top:27px; width:9px; height:9px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); transition:transform .3s cubic-bezier(.22,.68,0,1)} .faq details[open] summary::after{transform:rotate(-135deg)} .faq .rep{padding:0 0 22px; margin:0; color:var(--text-2); font-size:15px; line-height:1.75; max-width:70ch} .liens{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:22px} .liens a{font-size:13px; color:var(--text-2); text-decoration:none; border:1px solid var(--line); border-radius:980px; padding:8px 14px; transition:border-color .2s, color .2s} .liens a:hover{border-color:var(--brand-text); color:var(--brand-text)} .card[data-nav]{cursor:pointer} .card .tags a{cursor:pointer; transition:border-color .18s, color .18s, background .18s} .card .tags a:hover{border-color:var(--brand-text); color:var(--brand-text); background:rgba(220,187,147,.06)} /* ── Survol des cartes ── */ .card[data-nav]{cursor:pointer} .card[data-nav]:hover{border-color:#2C507A} /* ── Les deux villes, sous le titre ── */ .villes{display:flex; align-items:center; justify-content:center; gap:16px; margin:22px 0 0; font-size:13px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-text)} .villes a{text-decoration:none; padding:2px 0; border-bottom:1px solid transparent; transition:border-color .25s} .villes a:hover{border-bottom-color:currentColor} .villes i{display:block; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; flex:none} .hero .lede{margin-top:16px} @media (max-width:560px){ .villes{gap:13px; font-size:12px; letter-spacing:.17em; margin-top:18px} } /* ── Mosaïque des lieux ── */ .mosaique{ display:grid; grid-template-columns:1.5fr 1fr 1fr; grid-template-rows:repeat(2, minmax(0,1fr)); gap:14px; margin-top:40px; aspect-ratio:16/7.4; } .mosaique figure{ margin:0; position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--line); background:var(--card); min-height:0; } .mosaique figure.grande{grid-row:span 2} .mosaique figure.large{grid-column:span 2} .mosaique img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transform-origin:center; transition:transform 1.1s cubic-bezier(.22,.68,0,1); } .mosaique figure:hover img{transform:scale(1.09)} .mosaique figure::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:17px; box-shadow:inset 0 0 0 1px rgba(220,187,147,0); transition:box-shadow .4s ease; } .mosaique figure:hover::after{box-shadow:inset 0 0 0 1px rgba(220,187,147,.45)} @media (max-width:820px){ .mosaique{grid-template-columns:1fr 1fr; grid-template-rows:auto; aspect-ratio:auto; gap:11px} .mosaique figure{aspect-ratio:3/2} .mosaique figure.grande{grid-row:auto; grid-column:span 2; aspect-ratio:3/2} .mosaique figure.large{grid-column:span 2; aspect-ratio:2/1} } @media (prefers-reduced-motion:reduce){ .mosaique img{transition:none} .mosaique figure:hover img{transform:none} } /* ── Les deux bureaux, avec la carte ── */ .lieu2{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:54px; align-items:center} .lieu-txt h2{font-size:clamp(26px,3.4vw,36px); line-height:1.1; margin:0} .lieu-txt p{margin:14px 0 0; color:var(--text-2); font-size:16.5px; font-weight:300; max-width:34ch} .past2{display:flex; flex-direction:column; gap:15px; margin-top:28px} .past2 a{display:flex; align-items:center; gap:15px; text-decoration:none} .past2 .ph{ width:62px; height:62px; flex:none; display:block; position:relative; border-radius:50%; overflow:hidden; box-sizing:border-box; border:1px solid rgba(220,187,147,.4); transition:border-color .45s ease; } .past2 .ph img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; transform:scale(1); transform-origin:center; transition:transform 1.1s cubic-bezier(.22,.68,0,1); } .past2 a:hover .ph{border-color:var(--brand-text)} .past2 a:hover .ph img,.past2 a:focus-visible .ph img{transform:scale(1.16)} @media (prefers-reduced-motion:reduce){ .past2 .ph img{transition:none} .past2 a:hover .ph img{transform:none} } .past2 b{display:block; font-size:15.5px; font-weight:500; color:var(--text); letter-spacing:-.02em} .past2 i{display:block; font-style:normal; font-size:13px; color:var(--muted); margin-top:2px; line-height:1.4} .past2 a:hover b{color:var(--brand-text)} .carte-fig{margin:0} .carte-fig svg{display:block; width:100%; height:auto} .carte-fig figcaption{margin-top:12px; font-size:12.5px; color:var(--muted); text-align:center} .carte-fig .cote,.carte-fig .riv{stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 1.8s cubic-bezier(.22,.68,0,1)} .carte-fig.on .cote{stroke-dashoffset:0} .carte-fig.on .riv{stroke-dashoffset:0; transition-delay:.4s} .carte-fig .mer,.carte-fig .crete,.carte-fig .lien,.carte-fig .ville,.carte-fig .lg{ opacity:0; transition:opacity .85s ease} .carte-fig.on .mer{opacity:1; transition-delay:.1s} .carte-fig.on .crete{opacity:1; transition-delay:.75s} .carte-fig.on .ville:nth-of-type(1){opacity:1; transition-delay:1s} .carte-fig.on .ville:nth-of-type(2){opacity:1; transition-delay:1.25s} .carte-fig.on .lien{opacity:1; transition-delay:1.5s} .carte-fig.on .lg{opacity:1; transition-delay:1.7s} @media (max-width:880px){ .lieu2{grid-template-columns:1fr; gap:34px} .lieu-txt p{max-width:60ch} } @media (prefers-reduced-motion:reduce){ .carte-fig .cote,.carte-fig .riv{stroke-dashoffset:0; transition:none} .carte-fig .mer,.carte-fig .crete,.carte-fig .lien,.carte-fig .ville,.carte-fig .lg{opacity:1; transition:none} } /* ── Les associés, en bandeau désaxé ── */ .duo{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:60px; align-items:center} .duo-txt h2{font-size:clamp(28px,4vw,40px); line-height:1.1; margin:0} .duo-txt p{margin:18px 0 0; color:var(--text-2); font-size:17.5px; font-weight:300; max-width:38ch} .duo-txt p.compo{margin-top:12px; font-size:14.5px; color:var(--muted)} .duo-txt .lnk{display:inline-block; margin-top:24px} .equipe9{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 22px} .equipe9 a{text-decoration:none; display:flex; flex-direction:column; align-items:center; text-align:center} .equipe9 img,.equipe9 .mono{ /* height:auto est indispensable : les images portent des attributs width/height qui réservent leur place avant chargement, et ces attributs valent aussi consigne de style. Sans cette ligne, la hauteur de l'attribut l'emporte, la largeur est ramenée à 118 px par la règle ci-dessus, et le portrait s'étire en ovale. */ width:100%; max-width:118px; height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover; display:grid; place-items:center; box-sizing:border-box; background:var(--card); border:1px solid rgba(220,187,147,.4); font-size:24px; font-weight:600; color:var(--brand-text); letter-spacing:-.02em; line-height:1; transition:border-color .3s ease, transform .45s cubic-bezier(.22,.68,0,1); } .equipe9 a:hover img,.equipe9 a:hover .mono{border-color:var(--brand-text); transform:translateY(-5px)} .equipe9 b{margin-top:13px; font-size:14px; font-weight:500; color:var(--text); letter-spacing:-.018em; line-height:1.3; display:block; min-height:2.6em; overflow-wrap:anywhere} .equipe9 .nf{display:block} .equipe9 .nf.l{font-size:.84em; letter-spacing:-.03em} .equipe9 .r{font-size:12px; color:var(--muted); display:block; margin-top:2px} .equipe9 a:hover b{color:var(--brand-text)} @media (max-width:560px){ .equipe9{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px} .equipe9 img,.equipe9 .mono{max-width:104px; font-size:21px} .equipe9 b{font-size:13px} .equipe9 .nf.l{font-size:.9em} .equipe9 .r{font-size:11.5px} } @media (prefers-reduced-motion:reduce){ .equipe9 img,.equipe9 .mono{transition:none} } @media (max-width:880px){ .duo{grid-template-columns:1fr; gap:38px} .duo-txt p{max-width:60ch} } @media (max-width:520px){ .assoc{gap:12px} .assoc b{font-size:12.5px; min-height:3.96em} .assoc span{font-size:11px} } @media (prefers-reduced-motion:reduce){ .assoc img{transition:none} } @media (prefers-reduced-motion:reduce){ .assoc img{transition:none} } /* ── Menu mobile en accordéon ── */ @media (max-width:880px){ .nav-links .rub{display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line)} .nav-links .rub .titre{flex:1; border-bottom:0} .nav-links .deplier{ display:block; flex:none; width:44px; height:44px; margin:0; padding:0; background:none; border:0; cursor:pointer; position:relative; opacity:0; transform:translateY(-12px); transition:opacity .34s ease, transform .46s cubic-bezier(.32,.72,0,1); } .nav-links.open .rub .deplier{opacity:1; transform:none} .nav-links .deplier::before,.nav-links .deplier::after{ content:""; position:absolute; left:50%; top:50%; width:13px; height:1.5px; border-radius:2px; background:var(--text-2); transform:translate(-50%,-50%); transition:transform .32s cubic-bezier(.32,.72,0,1)} .nav-links .deplier::after{transform:translate(-50%,-50%) rotate(90deg)} .nav-links .deplier[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(0deg)} .nav-links .sub{ display:grid; grid-template-rows:0fr; border-bottom:0; padding:0 0 0 2px; transition:grid-template-rows .42s cubic-bezier(.32,.72,0,1); } .nav-links .sub > *{min-height:0} .nav-links .sub.ouvert{grid-template-rows:1fr; border-bottom:1px solid var(--line)} .nav-links .sub .dedans{overflow:hidden; display:flex; flex-direction:column; padding-bottom:10px} } /* ── Pictogrammes des domaines et secteurs ── */ .card .ico{display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:13px; color:var(--brand-text); margin-bottom:16px; transition:border-color .35s ease, background .35s ease; background:rgba(220,187,147,.04)} .card .ico svg{width:21px; height:21px} .card:hover .ico{border-color:rgba(220,187,147,.45); background:rgba(220,187,147,.09)} .card.carte-plus{justify-content:flex-start; background:var(--bg-alt); text-decoration:none} .card.carte-plus h3{margin-bottom:8px} .card.carte-plus > p{color:var(--text-2); margin-bottom:0} .card.carte-plus .ico{background:transparent} .card.carte-plus .tags{grid-template-columns:1fr; grid-auto-rows:auto; gap:8px; padding-top:16px} .card.carte-plus .tags a{justify-content:flex-start; text-align:left; padding:7px 13px; min-height:0} /* ── Fiches courtes avec portrait ── */ .mini{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:16px 16px 18px; text-align:left; transition:border-color .35s ease} .mini:hover{border-color:#2C507A} .mini .photo{margin-bottom:14px; border-radius:16px} .mini h3{font-size:15.5px; font-weight:500; margin:0 0 3px} .mini p{margin:0; font-size:13.5px; color:var(--text-2); line-height:1.5} .mini .role{color:var(--brand-text); font-size:13px} .mini .mission{margin-top:7px; padding-top:7px; border-top:1px solid var(--line); font-size:13px} .mini + .mini{margin-top:0} .photo.mono.pt{aspect-ratio:4/5} .photo.mono.pt b{font-size:clamp(28px,4.4vw,40px)} /* ── Chiffres clés en mosaïque ── */ .bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px} .bento .b{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:22px; padding:26px 24px; background:var(--card); display:flex; flex-direction:column; justify-content:flex-end; min-height:150px; transition:border-color .35s ease} .bento .b:hover{border-color:#2C507A} .bento .b.large{grid-column:span 2; grid-row:span 2; justify-content:center; min-height:316px} .bento .b.wide{grid-column:span 2} .bento .n{font-family:Archivo,Inter,sans-serif; font-weight:700; letter-spacing:-.04em; line-height:1; font-size:clamp(34px,4vw,46px); color:var(--text); font-variant-numeric:tabular-nums} .bento .b.large .n{font-size:clamp(56px,7vw,86px); color:var(--text)} .bento .lg{margin:12px 0 0; font-size:14px; line-height:1.55; color:var(--text-2)} .bento .b.large .lg{font-size:16px; color:var(--lede); max-width:26ch} .bento .b .deco{position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%; border:1px solid rgba(220,187,147,.12); pointer-events:none} .bento .b.large .deco{width:280px; height:280px; right:-90px; top:-70px; border-color:rgba(220,187,147,.18)} .bento .b.large .deco2{position:absolute; right:-30px; bottom:-70px; width:200px; height:200px; border-radius:50%; border:1px solid rgba(220,187,147,.10); pointer-events:none} .bento .b.action{background:var(--tile)} .bento .b.action .n{color:var(--text)} .bento .b.action .lg{color:var(--lede)} .bento a.b{text-decoration:none} .bento a.b:hover{border-color:var(--brand-text)} .bento a.b:hover .lnk{color:var(--brand-text)} .bento a.b .lnk{margin-top:14px; font-size:13px} @media (max-width:1000px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} .bento .b.large{grid-column:span 2; grid-row:auto; min-height:220px} } @media (max-width:560px){ .bento{grid-template-columns:1fr; gap:12px} .bento .b,.bento .b.large{grid-column:span 1; min-height:0; padding:22px 20px} .bento .b.wide{grid-column:span 1} } /* ── Frise chronologique ── */ .frise{position:relative; display:grid; gap:0; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:44px} .frise::before{content:""; position:absolute; left:0; right:0; top:12px; height:1px; background:var(--line)} .frise::after{content:""; position:absolute; left:0; top:12px; height:1px; width:0; background:linear-gradient(90deg, var(--brand), rgba(220,187,147,.25)); transition:width 2s cubic-bezier(.22,.68,0,1)} .frise.on::after{width:100%} .frise .j{position:relative; padding:0 18px 0 0} .frise .pt{position:absolute; top:6px; left:0; width:13px; height:13px; border-radius:50%; background:var(--bg); border:1px solid var(--line); transition:border-color .5s ease, box-shadow .5s ease} .frise.on .j:nth-child(1) .pt{border-color:var(--brand-text); box-shadow:0 0 0 5px rgba(220,187,147,.08); transition-delay:.15s} .frise.on .j:nth-child(2) .pt{border-color:var(--brand-text); box-shadow:0 0 0 5px rgba(220,187,147,.08); transition-delay:.55s} .frise.on .j:nth-child(3) .pt{border-color:var(--brand-text); box-shadow:0 0 0 5px rgba(220,187,147,.08); transition-delay:.95s} .frise.on .j:nth-child(4) .pt{border-color:var(--brand-text); box-shadow:0 0 0 5px rgba(220,187,147,.08); transition-delay:1.35s} .frise.on .j:nth-child(5) .pt{border-color:var(--brand-text); box-shadow:0 0 0 5px rgba(220,187,147,.08); transition-delay:1.75s} .frise .t{padding-top:34px; opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .7s cubic-bezier(.22,.68,0,1)} .frise.on .t{opacity:1; transform:none} .frise.on .j:nth-child(1) .t{transition-delay:.2s} .frise.on .j:nth-child(2) .t{transition-delay:.6s} .frise.on .j:nth-child(3) .t{transition-delay:1s} .frise.on .j:nth-child(4) .t{transition-delay:1.4s} .frise.on .j:nth-child(5) .t{transition-delay:1.8s} .frise h3{font-family:Archivo,Inter,sans-serif; font-size:26px; font-weight:700; letter-spacing:-.03em; margin:0 0 8px; color:var(--text)} .frise .lb{display:block; font-size:14px; font-weight:500; color:var(--brand-text); margin-bottom:6px} .frise p{margin:0; font-size:14px; line-height:1.65; color:var(--text-2)} @media (max-width:900px){ .frise{grid-template-columns:1fr; gap:0} .frise::before{left:6px; right:auto; top:6px; bottom:14px; height:auto; width:1px} .frise::after{left:6px; top:6px; width:1px; height:0; background:linear-gradient(180deg,var(--brand),rgba(220,187,147,.25)); transition:height 2s cubic-bezier(.22,.68,0,1)} .frise.on::after{width:1px; height:calc(100% - 20px)} .frise .j{padding:0 0 26px 34px} .frise .pt{top:4px} .frise .t{padding-top:0} } @media (prefers-reduced-motion: reduce){ .frise::after{transition:none} .frise .t{opacity:1; transform:none; transition:none} } /* ── Parcours d'intervention ── */ .parcours{position:relative; max-width:74ch; margin:0 auto; padding:6px 0} .parcours::before{content:""; position:absolute; left:21px; top:38px; bottom:38px; width:2px; background:var(--line)} .parcours::after{content:""; position:absolute; left:21px; top:38px; width:2px; height:0; background:linear-gradient(180deg, var(--brand), rgba(220,187,147,.22)); transition:height 2.2s cubic-bezier(.22,.68,0,1)} .parcours.on::after{height:calc(100% - 76px)} .parcours .e{position:relative; display:grid; grid-template-columns:44px 1fr; gap:24px; padding:16px 0 26px} .parcours .num{width:44px; height:44px; border-radius:50%; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; z-index:1; transition:border-color .5s ease, color .5s ease, box-shadow .5s ease} .parcours .txt{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .7s cubic-bezier(.22,.68,0,1)} .parcours.on .txt{opacity:1; transform:none} .parcours.on .e:nth-child(1) .num{border-color:var(--brand-text); color:var(--brand-text); box-shadow:0 0 0 6px rgba(220,187,147,.07); transition-delay:.15s} .parcours.on .e:nth-child(2) .num{border-color:var(--brand-text); color:var(--brand-text); box-shadow:0 0 0 6px rgba(220,187,147,.07); transition-delay:.65s} .parcours.on .e:nth-child(3) .num{border-color:var(--brand-text); color:var(--brand-text); box-shadow:0 0 0 6px rgba(220,187,147,.07); transition-delay:1.15s} .parcours.on .e:nth-child(4) .num{border-color:var(--brand-text); color:var(--brand-text); box-shadow:0 0 0 6px rgba(220,187,147,.07); transition-delay:1.65s} .parcours.on .e:nth-child(1) .txt{transition-delay:.2s} .parcours.on .e:nth-child(2) .txt{transition-delay:.7s} .parcours.on .e:nth-child(3) .txt{transition-delay:1.2s} .parcours.on .e:nth-child(4) .txt{transition-delay:1.7s} .parcours h3{font-size:16.5px; font-weight:500; margin:10px 0 6px} .parcours p{margin:0; color:var(--text-2); font-size:14.8px; line-height:1.7} @media (max-width:620px){ .parcours .e{grid-template-columns:36px 1fr; gap:16px} .parcours .num{width:36px; height:36px; font-size:11.5px} .parcours::before,.parcours::after{left:17px} } @media (prefers-reduced-motion: reduce){ .parcours::after{height:calc(100% - 76px); transition:none} .parcours .txt{opacity:1; transform:none; transition:none} } /* ── Courbe du coût ── */ .courbe{max-width:940px; margin:0 auto} .courbe-fig{position:relative; background:var(--tile); border:1px solid var(--line); border-radius:26px; padding:30px 26px 22px} .courbe svg{display:block; width:100%; height:auto} .courbe .trace{stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 2.1s cubic-bezier(.22,.68,0,1)} .courbe.on .trace{stroke-dashoffset:0} .courbe .trace.b{transition-delay:.35s} .courbe .aire{opacity:0; transition:opacity 1.1s ease .9s} .courbe.on .aire{opacity:1} .courbe .pt{opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .6s cubic-bezier(.22,.68,0,1)} .courbe.on .pt{opacity:1; transform:none} .courbe.on .pt:nth-of-type(1){transition-delay:.7s} .courbe.on .pt:nth-of-type(2){transition-delay:.95s} .courbe.on .pt:nth-of-type(3){transition-delay:1.2s} .courbe.on .pt:nth-of-type(4){transition-delay:1.45s} .courbe-fin{margin:14px auto 0; max-width:56ch; text-align:center; font-size:14.5px; font-weight:300; color:var(--text-2)} .courbe .annot{opacity:0; transition:opacity .9s ease 1.7s} .courbe.on .annot{opacity:1} @media (max-width:700px){ .courbe .annot{display:none} } @media (prefers-reduced-motion:reduce){ .courbe .annot{opacity:1; transition:none} } .courbe-leg{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin-top:20px; font-size:13px; color:var(--text-2)} .courbe-leg span{display:inline-flex; align-items:center; gap:9px} .courbe-leg i{width:22px; height:2px; border-radius:2px; display:inline-block} @media (prefers-reduced-motion: reduce){ .courbe .trace{stroke-dashoffset:0; transition:none} .courbe .aire,.courbe .pt{opacity:1; transform:none; transition:none} } /* ── Articles ── */ .art{max-width:70ch; margin:0 auto} .art h2{font-size:23px; font-weight:500; letter-spacing:-.02em; margin:40px 0 14px; color:var(--text)} .art p{color:var(--text-2); font-size:16.5px; line-height:1.8; margin:0 0 18px} /* le lien de téléchargement du carrousel, au fil de l’article */ .art p.telech{margin:30px 0 0; padding:16px 18px; border:1px solid var(--brand-text); border-radius:14px; text-align:center} .art p.telech .lnk{font-size:15px} .art ul{margin:0 0 18px; padding-left:20px; color:var(--text-2); font-size:16.5px; line-height:1.8} .art li{margin-bottom:9px} .art .chapo{font-size:19px; font-weight:300; color:var(--text); line-height:1.7; margin-bottom:34px} .art .enc{border-left:2px solid var(--brand); padding:2px 0 2px 20px; margin:28px 0; color:var(--text); font-size:17px; line-height:1.7} .art .fin{margin-top:46px; padding-top:26px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); line-height:1.7} .art .fin a{color:var(--link)} .artnav{max-width:70ch; margin:34px auto 0; display:flex; gap:20px; flex-wrap:wrap; font-size:14px} .artnav a{color:var(--link); text-decoration:none} /* ── Outils ── */ .tool{border:1px solid var(--line); border-radius:20px; padding:26px 26px 24px; background:var(--card)} .tool h3{font-size:19px; font-weight:500; margin:0 0 6px} .tool > p{margin:0 0 20px; color:var(--text-2); font-size:14.5px; line-height:1.65} .calc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px} .calc > *{min-width:0} .calc select,.calc input{min-width:0; max-width:100%; text-overflow:ellipsis} .tool{overflow:hidden} .calc .field{display:flex; flex-direction:column; gap:7px} .calc .field.full{grid-column:1 / -1} .calc-out{grid-column:1 / -1; margin-top:6px; padding:22px 24px; border-radius:16px; background:var(--bg-alt); border:1px solid var(--line)} .calc-out .big{font-size:30px; font-weight:500; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums} .calc-out .det{margin:8px 0 0; font-size:13.5px; color:var(--text-2); line-height:1.6} .calc-note{grid-column:1 / -1; margin:4px 0 0; font-size:12.5px; color:var(--muted); line-height:1.6} .soon{display:inline-block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:980px; padding:3px 10px; margin-bottom:10px} @media (max-width:700px){ .calc{grid-template-columns:1fr} } /* ── Honoraires ── */ .hono{max-width:880px; margin:0 auto} .hono .row{display:grid; grid-template-columns:230px 1fr; gap:34px; padding:30px 0; border-top:1px solid var(--line)} .hono .row:last-of-type{border-bottom:1px solid var(--line)} .hono h3{font-size:16px; font-weight:500; margin:0; color:var(--text); letter-spacing:-.01em} .hono .row > div > p{margin:0; color:var(--text-2); font-size:15px; line-height:1.75} .hono .amt{display:block; margin-top:6px; font-size:13px; color:var(--muted)} .hono .end{margin:34px auto 0; max-width:62ch; text-align:center; color:var(--text-2); font-size:15px; line-height:1.75} @media (max-width:760px){ .hono .row{grid-template-columns:1fr; gap:10px; padding:24px 0} } .grid.g1{display:grid; grid-template-columns:1fr; gap:20px} .grid.g2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px} @media (max-width:820px){ .grid.g2{grid-template-columns:1fr} } /* ── Fiches de l'équipe ── */ .membre{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:18px 18px 20px; text-align:left; gap:0} .membre .photo{margin-bottom:16px} .m-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap} /* Les liens de la fiche suivent la même règle que les pastilles d'expertises : pleine largeur, alignés à gauche, empilés. Une seule colonne de lecture du haut de la carte jusqu'au courriel. */ .m-head.m-head{flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0} .m-head.m-head > div{flex:0 0 auto} /* Deux registres, pas deux variantes du même : LinkedIn est une référence que l'on consulte, le rendez-vous est l'action du site. Le premier est un lien nu, le second garde la pastille. */ .m-head .m-li .m-ico{flex:none; margin-right:7px; opacity:.9} .m-head .m-li{ display:inline-flex; align-items:center; justify-content:flex-start; align-self:flex-start; width:auto; margin-top:10px; padding:0; border:0; border-radius:0; background:none; font-size:13px; color:var(--text-2); white-space:normal; } .m-head .m-li:hover{color:var(--brand-text); text-decoration:underline; text-underline-offset:3px} .m-head .m-rdv{ display:flex; align-items:center; align-self:stretch; width:100%; margin-top:14px; padding:9px 14px; border:1px solid var(--brand-text); border-radius:980px; color:var(--brand-text); font-size:13px; text-decoration:none; } .m-head .m-rdv:hover{background:rgba(220,187,147,.08); text-decoration:none} .m-head > div{min-width:0; flex:1 1 160px} .m-head h3{overflow-wrap:anywhere} .m-head h3{margin:0 0 3px} .membre .role{font-size:13.5px; margin:0} .m-li{flex:none; display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:1; padding:7px 11px; border:1px solid var(--line); border-radius:980px; color:var(--text-2); text-decoration:none; white-space:nowrap; transition:border-color .2s, color .2s} .m-li:hover{border-color:var(--brand-text); color:var(--brand-text)} .m-sec{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)} .m-lbl{display:block; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:6px} .membre .m-sec p{margin:0; font-size:14.5px; line-height:1.65} .m-mail{display:block; margin-top:16px; font-size:13.5px; overflow-wrap:anywhere} .membre .m-tags{display:grid; grid-template-columns:1fr; gap:6px; margin-top:3px} .membre .m-tags a{display:block; text-align:left; font-size:12px; text-decoration:none; color:var(--text-2); line-height:1.3; border:1px solid var(--line); border-radius:980px; padding:5px 11px; overflow-wrap:anywhere; transition:border-color .18s, color .18s, background .18s} .membre .m-tags a:hover{border-color:var(--brand-text); color:var(--brand-text); background:rgba(220,187,147,.06)} /* ── Intertitres de l'équipe ── */ .grp{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 26px; padding-bottom:12px; border-bottom:1px solid var(--line)} .grp h3{font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); margin:0} .grp span{font-size:12px; color:var(--muted)} /* ── Bandeau et modale cookies ── */ .cookie{position:fixed; left:0; right:0; bottom:0; z-index:140; padding:14px; display:none} body.cookie-visible .cookie{display:block; animation:ckup .45s ease both} @keyframes ckup{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}} .cookie-card{max-width:960px; margin:0 auto; background:var(--card); border:1px solid var(--line); box-shadow:0 20px 60px rgba(11,37,69,.5); display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap} .cookie-card p{margin:0; flex:1 1 340px; font-size:13.5px; line-height:1.6; color:var(--text-2)} .cookie-card p b{display:block; color:var(--text); margin-bottom:5px} .cookie-card p a{color:var(--link)} .cookie-actions{display:flex; gap:9px; flex-wrap:wrap} .cbtn{font:inherit; font-size:13.5px; line-height:1; cursor:pointer; border-radius:980px; border:1px solid var(--line); background:transparent; color:var(--text); transition:border-color .2s, color .2s, opacity .2s} .cbtn:hover{border-color:var(--brand); color:var(--brand)} .cbtn.fill{background:var(--brand); border-color:var(--brand); color:var(--on-brand)} .cbtn.fill:hover{opacity:.88; color:var(--on-brand)} .cdlg{position:fixed; inset:0; z-index:150; padding:20px; background:rgba(11,37,69,.74); display:none; align-items:center; justify-content:center} body.cdlg-open .cdlg{display:flex} body.cdlg-open{overflow:hidden} .cdlg-card{width:100%; max-width:640px; max-height:86vh; overflow-y:auto; background:var(--card); border:1px solid var(--line); box-shadow:0 30px 80px rgba(11,37,69,.55)} .cdlg-card h2{margin:0 0 10px} .cdlg-card > p{font-size:13.5px; color:var(--text-2); line-height:1.65; margin:0 0 20px} .cat{display:grid; align-items:start; gap:16px} .cat h3{font-size:15px; font-weight:500; margin:0 0 4px} .cat p{margin:0; font-size:13px; color:var(--text-2); line-height:1.55} .cat .fixed{font-size:11px; color:var(--muted); text-align:right} .sw{appearance:none; -webkit-appearance:none; width:46px; height:26px; border-radius:980px; background:#16406B; border:1px solid #2C507A; position:relative; cursor:pointer; align-self:center; transition:background .2s, border-color .2s; flex:none} .sw::after{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#8098B0; transition:left .2s, background .2s} .sw:checked{background:var(--brand); border-color:var(--brand)} .sw:checked::after{left:22px; background:var(--on-brand)} .cdlg-foot{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:22px; padding-top:18px} .cdlg-note{font-size:12px; color:var(--muted); line-height:1.55; margin:14px 0 0} @media (max-width:640px){ .cookie{padding:10px} .cookie-card{display:block} .cookie-actions{margin-top:14px} .cookie-actions .cbtn{flex:1 1 auto} .cdlg-foot .cbtn{flex:1 1 auto} } .cookie-card{border-radius:22px; padding:22px 24px; border-color:#26496F} .cookie-card p b{font-size:16px} .cbtn{padding:11px 22px} .cdlg-card{border-radius:26px; padding:34px 34px 28px; border-color:#26496F} .cdlg-card h2{font-size:23px; font-weight:500} .cat{ grid-template-columns:1fr 46px; padding:18px; border:1px solid #16406B; border-radius:16px; margin-bottom:10px; background:rgba(255,255,255,.015); } .cat:first-of-type{border-top:1px solid #16406B} .cat .fixed{align-self:center} .cdlg-foot{border-top:1px solid #16406B} /* ── Parcours de contact ── */ .deck{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr); gap:26px; align-items:stretch} @media (max-width:920px){ /* sans min-width:0, un enfant de grille refuse de rétrécir sous sa largeur minimale de contenu et fait déborder la page sur les petits écrans */ .deck{grid-template-columns:minmax(0,1fr)} .deck > *{min-width:0} } .deck-side{ background:var(--card); border:1px solid var(--line); border-radius:26px; padding:30px 26px; display:flex; flex-direction:column; } @media (max-width:920px){ .deck-side{position:static} } .deck-side .lbl{font-size:11.5px; letter-spacing:.06em; color:var(--muted); font-weight:600; margin-bottom:16px} .deck-side .ln{display:flex; flex-direction:column; gap:2px; padding:11px 0; border-top:1px solid var(--line)} .deck-side .ln span{font-size:12px; color:var(--muted)} .deck-side .ln a{font-size:16px; color:var(--text); text-decoration:none} .deck-side .ln a:hover{color:var(--brand-text)} /* ── Calendrier ── */ .cal{display:grid; grid-template-columns:minmax(0,1fr) 128px; gap:22px} @media (max-width:620px){ .cal{grid-template-columns:1fr} } .cal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; font-size:14px; font-weight:500; letter-spacing:.02em; } .cal-nav{ font:inherit; font-size:18px; line-height:1; background:none; border:1px solid var(--line); border-radius:9px; width:30px; height:30px; color:var(--text-2); cursor:pointer; transition:.15s; } .cal-nav:hover:not(:disabled){border-color:var(--brand-text); color:var(--brand-text)} .cal-nav:disabled{opacity:.3; cursor:default} .cal-dows,.cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:5px} .cal-dows span{text-align:center; font-size:11px; color:var(--muted); padding-bottom:6px} .cal-day{ aspect-ratio:1; border:1px solid transparent; border-radius:10px; background:#0B2545; font:inherit; font-size:14px; color:var(--text-2); cursor:pointer; transition:.14s; font-variant-numeric:tabular-nums; } .cal-day:hover:not(:disabled){border-color:var(--brand-text); color:var(--text)} .cal-day:disabled{background:transparent; color:#2C507A; cursor:default} .cal-day.sel{background:var(--brand-text); color:#0B2545; font-weight:600; border-color:var(--brand-text)} .cal-day.empty{background:transparent; cursor:default} .cal-slots{display:flex; flex-direction:column; gap:8px} .cal-hint{font-size:13px; color:var(--muted); font-weight:300; line-height:1.45} .slotbtn{ font:inherit; font-size:14px; padding:11px 10px; border-radius:11px; border:1px solid var(--line); background:#0B2545; color:var(--text); cursor:pointer; transition:.14s; font-variant-numeric:tabular-nums; } .slotbtn:hover{border-color:var(--brand-text)} .slotbtn.sel{background:var(--brand-text); color:#0B2545; border-color:var(--brand-text); font-weight:600} /* ── Politique de confidentialité ── */ .maj{font-size:12.5px; letter-spacing:.05em; color:var(--muted); margin-bottom:26px} .pol{display:grid; grid-template-columns:44px 1fr; gap:18px; padding:30px 0; border-top:1px solid var(--line)} @media (max-width:600px){ .pol{grid-template-columns:1fr; gap:8px} } .pol .pn{font-size:12.5px; color:var(--brand-text); font-variant-numeric:tabular-nums; padding-top:5px} .pol h2{font-size:19px; font-weight:600; margin-bottom:12px} .pol p{color:var(--text-2); font-weight:300; font-size:15.5px; margin-bottom:12px} .pol p:last-child{margin-bottom:0} .pol ul{margin:0 0 12px; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px} .pol li{ color:var(--text-2); font-weight:300; font-size:15.5px; padding-left:18px; position:relative; line-height:1.5; } .pol li::before{content:"—"; position:absolute; left:0; color:var(--brand-text)} .pol .warn-p{ border-left:2px solid var(--brand-text); padding-left:16px; color:var(--text); font-weight:400; font-size:15px; } /* ── Pages légales en cartes ── */ .lgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px} .lcard{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:26px 24px; display:flex; flex-direction:column; gap:12px; } .lcard.wide{grid-column:1 / -1} .lcard .ll{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-text); font-weight:600; } .lcard .lb{font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--text)} .lcard p{font-size:14.5px; color:var(--text-2); font-weight:300; line-height:1.6} .lcard a{color:var(--link); text-decoration:none} .lcard a:hover{text-decoration:underline} .lcard a[target="_blank"]::after{content:" ↗"; font-size:.85em} /* politique de confidentialité : mêmes cartes arrondies */ section.s .pol{ display:grid; grid-template-columns:44px 1fr; gap:18px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:26px 26px; margin-bottom:16px; border-top:1px solid var(--line); } @media (max-width:600px){ section.s .pol{grid-template-columns:1fr; gap:8px; padding:22px 20px} } /* ── Lisibilité sur petit écran : les étiquettes en capitales remontent au-dessus du seuil de confort ── */ @media (max-width:560px){ /* bandeau cookies resserré : il ne doit pas manger un tiers de l'écran */ .cookie{padding:8px} .cookie-card{padding:15px 16px; border-radius:18px; gap:13px} .cookie-card p{font-size:12.8px; line-height:1.5} .cookie-card p b{margin-bottom:3px} .cookie-actions{gap:7px; margin-top:12px} .cbtn{padding:10px 12px; font-size:13px} } @media (max-width:760px){ .m-lbl{font-size:11.5px; letter-spacing:.10em} /* pastilles des fiches : cible tactile portée de 28 à 34 px */ .membre .m-tags a{padding:8px 12px; line-height:1.35} .lcard .ll{font-size:11.5px} .soon{font-size:11.5px} .deck-side .lbl{font-size:12px} } /* ══════════ Le croisement : respiration entre expertises et secteurs ══════════ */ .cro{padding:86px 0 90px; position:relative; overflow:hidden} .cro::before, .cro::after{ content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(220,187,147,.26) 24%, rgba(220,187,147,.26) 76%, transparent); } .cro::before{top:0} .cro::after{bottom:0} .croisement{position:relative; text-align:center} .croisement::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1500px,142vw); height:340px; pointer-events:none; z-index:0; background:radial-gradient(50% 50% at 50% 50%, rgba(220,187,147,.085), rgba(220,187,147,0) 72%); opacity:0; transition:opacity 1.3s ease .1s; } .croisement.on::before{opacity:1} .croisement > *{position:relative; z-index:1} .cro-rule{ display:block; width:0; height:1px; margin:0 auto 22px; background:linear-gradient(90deg, rgba(220,187,147,0), rgba(220,187,147,.8), rgba(220,187,147,0)); transition:width 1.05s cubic-bezier(.2,.7,.2,1) .12s; } .croisement.on .cro-rule{width:76px} .cro-eye{ margin:0 0 22px; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--brand-text); opacity:0; transform:translateY(9px); transition:opacity .75s ease .22s, transform .75s ease .22s; } .croisement.on .cro-eye{opacity:1; transform:none} .cro-box{ display:flex; align-items:center; justify-content:center; min-height:var(--croH, 112px); opacity:0; transform:translateY(11px); transition:opacity .8s ease .34s, transform .8s ease .34s; } .croisement.on .cro-box{opacity:1; transform:none} .cro-phrase{ margin:0 auto; max-width:28ch; font-family:Newsreader,Georgia,serif; font-style:italic; font-weight:300; font-size:clamp(24px,3.1vw,36px); line-height:1.26; letter-spacing:-.012em; color:var(--text); text-wrap:balance; } .cro-pour{color:var(--muted)} .cro-w{ display:inline; text-decoration:underline; text-decoration-color:rgba(220,187,147,.32); text-decoration-thickness:1px; text-underline-offset:.2em; transition:opacity .36s ease, filter .36s ease, text-decoration-color .36s ease; } .cro-w.sort{opacity:0; filter:blur(5px); text-decoration-color:rgba(220,187,147,0)} .cro-sub{ margin:30px auto 0; max-width:54ch; color:var(--text-2); font-size:17px; font-weight:300; opacity:0; transform:translateY(9px); transition:opacity .8s ease .5s, transform .8s ease .5s; } .croisement.on .cro-sub{opacity:1; transform:none} @media (max-width:760px){ .cro{padding:64px 0 68px} .cro-phrase{max-width:19ch; line-height:1.3} .cro-sub{font-size:16px; margin-top:24px} .cro-eye{margin-bottom:18px} } @media (prefers-reduced-motion:reduce){ .cro-rule{width:76px} .croisement .cro-eye, .croisement .cro-box, .croisement .cro-sub{opacity:1; transform:none} } /* ══════════ Zoom au survol : les grandes photos ══════════ */ /* Même geste que sur les pastilles et la mosaïque : un cadre qui rogne, une image qui avance à l'intérieur. */ .zoomcadre{ display:block; overflow:hidden; line-height:0; position:relative; border-radius:24px; border:1px solid var(--line); background:var(--card); } .zoomcadre img.ph{ border:0; border-radius:0; width:100%; display:block; transform:scale(1); transform-origin:center; transition:transform 1.1s cubic-bezier(.22,.68,0,1); } .zoomcadre:hover img.ph{transform:scale(1.09)} @media (max-width:700px){ .zoomcadre{border-radius:18px} } /* L'ouverture de l'accueil : la parallaxe pilote le calque, le zoom l'image. */ .parallax .px-in{will-change:transform} .parallax .px-in img{ transform:scale(1); transform-origin:center; transition:transform 1.1s cubic-bezier(.22,.68,0,1); } .parallax:hover .px-in img{transform:scale(1.055)} @media (prefers-reduced-motion:reduce){ .zoomcadre img.ph,.parallax .px-in img{transition:none} .zoomcadre:hover img.ph,.parallax:hover .px-in img{transform:none} } /* ══════════ Cibles tactiles sur téléphone ══════════ Les liens isolés — « Voir la page dédiée », fils d'Ariane, adresses de courriel — sont des boutons déguisés : ils méritent la hauteur d'un bouton. Les liens en plein texte, eux, n'y touchent pas : les épaissir décorerait le paragraphe de zones cliquables invisibles. */ @media (max-width:760px){ .lnk{display:inline-block; padding-block:9px} .phead .crumb a{display:inline-block; padding-block:10px} .phead .crumb{margin-bottom:6px} .membre a{display:inline-block; padding-block:9px} .actu span.more{display:inline-block; padding-block:7px} .duo-txt .lnk{margin-top:16px} .card .lnk{margin-top:auto!important; padding-top:16px} .det .lnk{margin-top:8px!important} } /* ══════════ Intertitres des pages Expertises et Secteurs ══════════ Dix blocs identiques à la file fatiguent l'œil. Les cartes vont deux par deux, et chaque paire s'ouvre sur un intertitre dont le filet se trace au moment où l'on arrive dessus. C'est le seul mouvement de ces deux pages : il marque le rythme sans rien ajouter à lire. */ .grp{position:relative; border-bottom:0; padding-bottom:14px} .grp::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; pointer-events:none; background:linear-gradient(90deg, rgba(220,187,147,.8), var(--line) 26%, var(--line)); transition:width 1.15s cubic-bezier(.2,.7,.2,1); } .grp.on::after{width:100%} @media (prefers-reduced-motion:reduce){ .grp::after{width:100%; transition:none} } /* ══════════ La page se compose ══════════ Sur les deux pages d'index, l'arrivée des cartes est orchestrée plutôt que fondue : la carte se pose à plat comme une feuille qu'on dépose, le pictogramme se trace au trait, puis les pastilles tombent une à une. Le tout dure moins d'une seconde et ne se joue qu'une fois par paire — c'est ce qui distingue une page qui s'écrit d'un site qui clignote. */ .grid.dep{perspective:1200px} /* la feuille se pose */ .grid.dep .card.reveal{ opacity:0; transform:translateY(38px) rotateX(10deg); transform-origin:50% 0; } .grid.dep .card.reveal.in{ opacity:1; transform:none; transition:opacity .62s ease, transform .92s cubic-bezier(.2,.78,.2,1); } /* le pictogramme se trace */ .grid.dep .card .ico svg *{ stroke-dasharray:130; stroke-dashoffset:130; transition:stroke-dashoffset 1.05s cubic-bezier(.32,.72,.18,1) .2s; } .grid.dep .card.in .ico svg *{stroke-dashoffset:0} /* les pastilles tombent une à une */ .grid.dep .card .tags a{ opacity:0; transform:translateY(9px); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.78,.2,1), border-color .18s, color .18s, background .18s; } .grid.dep .card.in .tags a{opacity:1; transform:none} .grid.dep .card.in .tags a:nth-child(1){transition-delay:.30s} .grid.dep .card.in .tags a:nth-child(2){transition-delay:.35s} .grid.dep .card.in .tags a:nth-child(3){transition-delay:.40s} .grid.dep .card.in .tags a:nth-child(4){transition-delay:.45s} .grid.dep .card.in .tags a:nth-child(5){transition-delay:.50s} .grid.dep .card.in .tags a:nth-child(6){transition-delay:.55s} .grid.dep .card.in .tags a:nth-child(7){transition-delay:.60s} .grid.dep .card.in .tags a:nth-child(8){transition-delay:.65s} /* le lien de bas de carte ferme la séquence */ .grid.dep .card .lnk{opacity:0; transition:opacity .5s ease .72s} .grid.dep .card.in .lnk{opacity:1} @media (prefers-reduced-motion:reduce){ .grid.dep .card.reveal,.grid.dep .card.reveal.in{opacity:1; transform:none; transition:none} .grid.dep .card .ico svg *{stroke-dashoffset:0; transition:none} .grid.dep .card .tags a,.grid.dep .card .lnk{opacity:1; transform:none; transition:none} }