/* Site du cabinet (WEB-003). Couleurs tirées du logo : bleu du « C », gris-bleu des « FF ». */
:root {
  --marine: #14305e;
  --marine-2: #1c3f75;
  --bleu: #2451d6;
  --bleu-vif: #3a6cf4;
  --bleu-pale: #eaf0fc;
  --bleu-ciel: #8fb0ff;
  --ardoise: #5f7c86;
  --texte: #1c2733;
  --texte-doux: #52606d;
  --fond: #ffffff;
  --fond-doux: #f5f7fb;
  --bordure: #dde3ec;
  --vert: #1f8a5b;
  --rayon: 12px;
  --ombre: 0 1px 2px rgba(16, 36, 72, .05), 0 8px 24px rgba(16, 36, 72, .07);
  --ombre-forte: 0 20px 50px rgba(16, 36, 72, .16);
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--texte); background: var(--fond); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); }
a:hover { color: var(--marine); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; color: var(--marine); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--bleu); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

.cadre { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 8px; background: #fff; padding: 8px 12px; z-index: 10; }
.icone { width: 1.25em; height: 1.25em; flex: none; }

/* En-tête et menu */
.entete { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--bordure); }
.entete-cadre { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; }
.logo { display: block; flex: none; }
.logo img { width: 180px; }
@media (min-width: 1200px) { .logo img { width: 190px; } }
.menu-appel .bouton, .menu a { white-space: nowrap; }
.menu { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.menu a:not(.bouton) { display: block; padding: 8px 11px; border-radius: 8px; text-decoration: none; color: var(--texte); font-weight: 500; font-size: .94rem; }
.menu a:not(.bouton):hover { background: var(--fond-doux); color: var(--marine); }
.menu a[aria-current="page"] { color: var(--bleu); }
.menu-appel { margin-left: 10px; }
.menu-bouton { display: none; font: inherit; font-weight: 500; background: none; border: 1px solid var(--bordure); border-radius: 8px; padding: 8px 14px; color: var(--marine); cursor: pointer; }

@media (max-width: 1140px) {
  .menu-bouton { display: block; }
  .entete nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--bordure); display: none; box-shadow: var(--ombre); }
  .entete.ouvert nav { display: block; }
  .menu { flex-direction: column; align-items: stretch; padding: 8px 20px 18px; }
  .menu a:not(.bouton) { padding: 12px; }
  .menu-appel { margin: 10px 0 0; }
  .menu-appel .bouton { display: block; text-align: center; }
  .logo img { width: 170px; }
}
@media (max-width: 480px) { .logo img { width: 150px; } }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: inherit; font-weight: 600; font-size: .98rem; line-height: 1.2; padding: 12px 22px; border-radius: 10px; border: 1px solid var(--bleu); background: var(--bleu); color: #fff; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.bouton:hover { background: var(--marine); border-color: var(--marine); color: #fff; }
.bouton .icone { width: 1.1em; height: 1.1em; transition: transform .15s; }
.bouton:hover .icone { transform: translateX(2px); }
.bouton-grand { padding: 15px 26px; font-size: 1.02rem; }
.bouton-petit { padding: 9px 16px; font-size: .9rem; }
.bouton-second { background: #fff; color: var(--marine); border-color: var(--bordure); }
.bouton-second:hover { background: var(--fond-doux); color: var(--marine); border-color: var(--marine); }
.bouton-clair { background: #fff; color: var(--marine); border-color: #fff; }
.bouton-clair:hover { background: var(--bleu-pale); color: var(--marine); border-color: var(--bleu-pale); }
.bouton-contour { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.bouton-contour:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Textes communs */
.surtitre { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); margin-bottom: 1em; }
.chapeau { font-size: 1.14rem; color: var(--texte-doux); max-width: 42em; }
.section { padding: 96px 0; }
.section-douce { background: var(--fond-doux); }
.section-tete { max-width: 760px; margin-bottom: 48px; }
.section-tete .chapeau { margin-bottom: 0; }

/* Accueil : bandeau principal */
.hero { position: relative; overflow: hidden; padding: 88px 0 96px; background:
  radial-gradient(900px 480px at 85% 10%, rgba(58,108,244,.13), transparent 60%),
  radial-gradient(700px 400px at 0% 100%, rgba(95,124,134,.10), transparent 60%),
  var(--fond-doux); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(20,48,94,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,48,94,.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.hero-grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.hero .chapeau { font-size: 1.2rem; }
.hero-tel { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; color: var(--texte-doux); font-size: .96rem; }
.hero-tel .icone { color: var(--bleu); }
.hero-tel a { font-weight: 600; text-decoration: none; }
@media (max-width: 920px) { .hero-grille { grid-template-columns: 1fr; } .hero { padding: 64px 0 72px; } }

.hero-visuel { position: relative; padding: 36px 20px 44px; }
.apercu { background: #fff; border: 1px solid var(--bordure); border-radius: 18px; box-shadow: var(--ombre-forte); padding: 24px; }
.apercu-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.apercu-titre { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--marine); }
.pastille { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 99px; }
.pastille .icone { width: 1em; height: 1em; }
.pastille-verte { background: #e3f4ec; color: var(--vert); }
.apercu-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.apercu-chiffres div { background: var(--fond-doux); border-radius: 10px; padding: 10px 12px; }
.apercu-chiffres span { display: block; font-size: .75rem; color: var(--texte-doux); }
.apercu-chiffres strong { font-size: 1.15rem; color: var(--marine); }
.apercu-barres { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding-top: 6px; border-bottom: 1px solid var(--bordure); }
.apercu-barres i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #c9d7fb, #a9bff6); }
.apercu-barres i.courant { background: linear-gradient(180deg, var(--bleu-vif), var(--bleu)); }
.apercu-flottant { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--bordure); border-radius: 14px; box-shadow: var(--ombre-forte); padding: 12px 16px; font-size: .85rem; }
.apercu-flottant .icone { width: 2.1em; height: 2.1em; padding: 7px; border-radius: 10px; background: var(--bleu-pale); color: var(--bleu); }
.apercu-flottant strong { display: block; color: var(--marine); }
.apercu-flottant span { color: var(--texte-doux); }
.apercu-haut { top: 0; right: -6px; }
.apercu-bas { bottom: 0; left: -6px; }
@media (max-width: 520px) { .apercu-haut { right: 0; } .apercu-bas { left: 0; } .apercu-chiffres strong { font-size: 1rem; } }

/* Bandeau de confiance */
.confiance { border-bottom: 1px solid var(--bordure); background: #fff; }
.confiance-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 30px; padding-bottom: 30px; }
.confiance-grille > div { display: flex; gap: 14px; align-items: flex-start; }
.confiance-grille .icone { width: 2.4em; height: 2.4em; padding: 9px; border-radius: 12px; background: var(--bleu-pale); color: var(--bleu); }
.confiance-grille p { margin: 0; font-size: .92rem; color: var(--texte-doux); line-height: 1.45; }
.confiance-grille strong { display: block; color: var(--marine); font-size: .98rem; }
@media (max-width: 900px) { .confiance-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .confiance-grille { grid-template-columns: 1fr; } }

/* Tuiles de services */
.tuiles { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tuile { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bordure); border-radius: 16px; padding: 30px; text-decoration: none; color: var(--texte); transition: transform .2s, box-shadow .2s, border-color .2s; }
.tuile:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: #c4d2f3; color: var(--texte); }
.tuile > .icone { width: 3em; height: 3em; padding: 12px; border-radius: 14px; background: var(--bleu-pale); color: var(--bleu); margin-bottom: 20px; }
.tuile p { color: var(--texte-doux); flex: 1; }
.lien-suite { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--bleu); }
.lien-suite .icone { width: 1em; height: 1em; transition: transform .15s; }
.tuile:hover .lien-suite .icone { transform: translateX(3px); }

/* Section marine (tableaux de bord) */
.section-marine { background: radial-gradient(800px 400px at 100% 0%, rgba(58,108,244,.35), transparent 60%), var(--marine); color: #dbe4f4; }
.section-marine h2, .section-marine h3 { color: #fff; }
.section-marine .surtitre { color: var(--bleu-ciel); }
.section-marine .chapeau { color: #c7d3ea; }
.vedette { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 920px) { .vedette { grid-template-columns: 1fr; } }
.liste-crochets { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.liste-crochets li { display: flex; gap: 12px; align-items: flex-start; }
.liste-crochets .icone { width: 1.4em; height: 1.4em; padding: 3px; border-radius: 99px; background: var(--bleu-pale); color: var(--bleu); margin-top: 1px; }
.section-marine .liste-crochets .icone, .service-marine .liste-crochets .icone { background: rgba(143,176,255,.18); color: var(--bleu-ciel); }
.tableau-exemple { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 24px; }
.te-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.te-tuiles div { background: rgba(255,255,255,.07); border-radius: 12px; padding: 14px; }
.te-tuiles span { display: block; font-size: .75rem; color: #aebcd6; }
.te-tuiles strong { display: block; font-family: var(--serif); font-size: 1.45rem; color: #fff; }
.te-tuiles em { font-style: normal; font-size: .75rem; color: #9fe0bf; }
.te-courbe { display: block; width: 100%; height: 150px; margin: 22px 0 10px; }
.te-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .8rem; color: #aebcd6; }
.te-reel, .te-budget { display: inline-block; width: 18px; height: 3px; border-radius: 2px; background: var(--bleu-ciel); }
.te-budget { background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 5px, transparent 5px 9px); margin-left: 10px; }
.te-note { margin-left: auto; font-style: italic; }
@media (max-width: 520px) { .te-tuiles { grid-template-columns: 1fr; } }

/* Étapes */
.etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: etape; }
.etapes li { position: relative; background: #fff; border: 1px solid var(--bordure); border-radius: 16px; padding: 30px; }
.etape-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 99px; background: var(--marine); color: #fff; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin-bottom: 18px; }
.etapes p { color: var(--texte-doux); margin: 0; }
@media (max-width: 860px) { .etapes { grid-template-columns: 1fr; } }

/* Profils */
.profils { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.profils article { background: #fff; border-radius: 16px; padding: 28px; border-top: 4px solid var(--bleu); box-shadow: var(--ombre); }
.profils p { color: var(--texte-doux); margin: 0; font-size: .96rem; }
@media (max-width: 980px) { .profils { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .profils { grid-template-columns: 1fr; } }

/* Questions fréquentes */
.faq-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
@media (max-width: 860px) { .faq-grille { grid-template-columns: 1fr; gap: 28px; } }
.faq details { border-bottom: 1px solid var(--bordure); }
.faq details:first-child { border-top: 1px solid var(--bordure); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; color: var(--marine); font-size: 1.04rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--bleu); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--texte-doux); margin: 0 0 22px; }

/* Appel final */
.appel-final { background: linear-gradient(120deg, var(--marine) 0%, #1d4596 100%); color: #d6e0f2; padding: 80px 0; }
.appel-final-cadre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.appel-final h2 { color: #fff; margin-bottom: .3em; }
.appel-final p { margin: 0; max-width: 34em; }
.appel-final .boutons { margin-top: 0; }

/* Pages intérieures */
.entete-page { padding: 72px 0 48px; background: radial-gradient(700px 300px at 90% 0%, rgba(58,108,244,.1), transparent 60%), var(--fond-doux); border-bottom: 1px solid var(--bordure); }
.entete-page .chapeau { margin-bottom: 0; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.puces a { padding: 8px 14px; border: 1px solid var(--bordure); border-radius: 99px; background: #fff; text-decoration: none; color: var(--marine); font-size: .9rem; font-weight: 500; }
.puces a:hover { border-color: var(--bleu); color: var(--bleu); }

/* Services */
.service { padding: 80px 0; }
.service-douce { background: var(--fond-doux); }
.service-marine { background: radial-gradient(700px 350px at 100% 0%, rgba(58,108,244,.35), transparent 60%), var(--marine); color: #dbe4f4; }
.service-marine h2, .service-marine h3 { color: #fff; }
.service-marine .chapeau { color: #c7d3ea; }
.service-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 860px) { .service-grille { grid-template-columns: 1fr; gap: 28px; } }
.service-icone { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--bleu-pale); color: var(--bleu); margin-bottom: 20px; }
.service-icone .icone { width: 28px; height: 28px; }
.service-marine .service-icone { background: rgba(143,176,255,.18); color: var(--bleu-ciel); }
.service .liste-crochets { margin-bottom: 0; }
.service-aparte { background: #fff; border: 1px solid var(--bordure); border-radius: 16px; padding: 28px; box-shadow: var(--ombre); margin-top: 76px; }
.service-douce .service-aparte { border-color: transparent; }
.service-marine .service-aparte { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none; color: #dbe4f4; }
.service-aparte h3 { font-size: 1.05rem; font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--bleu); }
.service-marine .service-aparte h3 { color: var(--bleu-ciel); }
.service-aparte p { margin: 0; }
@media (max-width: 860px) { .service-aparte { margin-top: 0; } }
.honoraires { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: center; }
.honoraires p { font-size: 1.1rem; color: var(--texte-doux); margin: 0; }
@media (max-width: 860px) { .honoraires { grid-template-columns: 1fr; gap: 16px; } }

/* À propos : citation encadrée de guillemets */
.citation { position: relative; margin: 0 auto; max-width: 900px; background: #fff; border: 1px solid var(--bordure); border-radius: 20px; box-shadow: var(--ombre); padding: 64px 72px; }
.guillemet { position: absolute; font-family: var(--serif); font-size: 11rem; text-shadow: 0 0 0 #fff; line-height: 1; color: var(--bleu); user-select: none; }
.guillemet-ouvrant { top: -54px; left: -14px; }
.guillemet-fermant { bottom: -124px; right: -14px; }
.citation-titre { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--marine); margin-bottom: 1.1em; }
.citation-texte p:not(.citation-titre) { font-size: 1.1rem; color: #35424f; }
.citation-appel { margin: 1.6em 0 0; }
@media (max-width: 640px) {
  .citation { padding: 52px 26px 44px; }
  .guillemet { font-size: 6.5rem; }
  .guillemet-ouvrant { top: -20px; left: 14px; }
  .guillemet-fermant { bottom: -62px; right: 16px; }
}

.grille { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.carte { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 26px; }
.carte h3 { margin-bottom: .4em; }
.carte p:last-child { margin-bottom: 0; }
.carte-trait { border-top: 3px solid var(--bleu); }

/* Équipe */
.equipe { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.membre { background: #fff; border: 1px solid var(--bordure); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.membre-photo { aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--bleu-pale), #dfe7f5); display: grid; place-items: center; }
.membre-photo img { width: 100%; height: 100%; object-fit: cover; }
.membre-initiales { font-family: var(--serif); font-size: 3rem; color: var(--ardoise); }
.membre-texte { padding: 18px 20px 20px; }
.membre h3 { margin-bottom: .15em; }
.membre-titre { color: var(--bleu); font-weight: 500; font-size: .92rem; margin-bottom: .6em; }
.membre-texte p { font-size: .95rem; }
.membre-courriel { font-size: .9rem; margin: 0; word-break: break-all; }

/* Tableaux */
.tableau-defile { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon); }
table { border-collapse: collapse; width: 100%; background: #fff; font-size: .96rem; }
th, td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--bordure); }
th { background: var(--fond-doux); color: var(--marine); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; color: var(--marine); white-space: nowrap; width: 1%; }
@media (max-width: 640px) { td:first-child { white-space: normal; } th, td { padding: 12px; } }
.note { font-size: .92rem; color: var(--texte-doux); margin-top: 14px; }

.liens { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.liens a { display: block; padding: 18px 20px; border: 1px solid var(--bordure); border-radius: var(--rayon); text-decoration: none; background: #fff; }
.liens a:hover { border-color: var(--bleu); }
.liens strong { display: block; color: var(--marine); }
.liens span { color: var(--texte-doux); font-size: .92rem; }

/* Nous joindre */
.joindre { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
@media (max-width: 860px) { .joindre { grid-template-columns: 1fr; } }
.coordonnees p { margin-bottom: 1.2em; }
.coordonnees strong { display: block; color: var(--marine); }
.carte-geo { margin-top: 8px; border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; background: var(--fond-doux); }
.carte-geo iframe { display: block; width: 100%; height: 280px; border: 0; }
.carte-geo-vide { padding: 22px; font-size: .95rem; }
.carte-geo-vide p { margin-bottom: .6em; }

.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bordure); margin-bottom: 24px; }
.onglets button { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 16px; color: var(--texte-doux); cursor: pointer; margin-bottom: -1px; }
.onglets button[aria-selected="true"] { color: var(--marine); border-bottom-color: var(--bleu); }
.formulaire[hidden] { display: none; }
.formulaire h3 { margin-top: 0; }
.js .formulaire h3 { position: absolute; left: -9999px; }
.champs { display: grid; gap: 16px 18px; grid-template-columns: 1fr 1fr; }
.champ-large { grid-column: 1 / -1; }
@media (max-width: 560px) { .champs { grid-template-columns: 1fr; } }
label { display: block; font-weight: 500; font-size: .92rem; margin-bottom: 6px; }
input, select, textarea { width: 100%; font: inherit; font-size: 1rem; padding: 11px 12px; border: 1px solid #c5ced8; border-radius: 10px; background: #fff; color: var(--texte); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu); outline-offset: 0; border-color: var(--bleu); }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .92rem; margin: 18px 0 20px; }
.consentement input { width: auto; margin-top: 4px; }
.piege { position: absolute; left: -9999px; }

/* Politique et pages de texte */
.texte { max-width: 760px; }
.texte h2 { margin-top: 1.6em; font-size: 1.4rem; }
.texte h3 { margin-top: 1.2em; font-size: 1.1rem; }

/* Pied de page */
.pied { background: #0f2446; color: #b9c6db; padding: 64px 0 24px; font-size: .95rem; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { text-decoration: underline; color: #fff; }
.pied-grille { display: grid; gap: 40px; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr; } }
.pied-logo { display: inline-block; margin-bottom: 1.1em; }
.pied-logo img { width: 200px; }
.pied-titre { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu-ciel); margin-bottom: .9em; }
.pied-liens { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied-bas { border-top: 1px solid rgba(255,255,255,.12); margin-top: 48px; padding-top: 20px; font-size: .85rem; }

/* Bandeau des témoins */
.temoins { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre-forte); padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size: .92rem; }
.temoins[hidden] { display: none; }
.temoins p { margin: 0; flex: 1 1 280px; }
.temoins-boutons { display: flex; gap: 8px; }
.temoins .bouton { padding: 9px 16px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* 2e révision de Loup (WEB-003) : photos, services regroupés, fiscalité en deux volets */
.entete-photo { position: relative; padding: 112px 0 72px; background-color: var(--marine); background-position: center; background-size: cover; border-bottom: 0; color: #d6e0f2; }
.entete-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,48,94,.94) 0%, rgba(20,48,94,.80) 50%, rgba(20,48,94,.45) 100%); }
.entete-photo .cadre { position: relative; }
.entete-photo h1 { color: #fff; }
.entete-photo .surtitre { color: var(--bleu-ciel); }
.entete-photo .chapeau { color: #d6e0f2; }
.entete-photo .puces a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; }
.entete-photo .puces a:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }

.photo { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--ombre-forte); background: var(--fond-doux); }
.photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.partie-tete { padding: 88px 0 8px; }
.partie-tete + .service { padding-top: 48px; }
.partie-tete .chapeau { margin-bottom: 0; }
.ancre { display: block; height: 0; }
.sous-titre { font-family: var(--sans); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--bleu); margin: 1.6em 0 .6em; }
.service-marine .sous-titre { color: var(--bleu-ciel); }
.service-cote { display: grid; gap: 24px; }
.service-cote .service-aparte { margin-top: 0; }

.volets-section { padding: 48px 0 96px; }
.volets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.volet { background: #fff; border: 1px solid var(--bordure); border-top: 4px solid var(--bleu); border-radius: 16px; padding: 34px; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.volet h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.volet-num { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); margin: 0 0 .3em; }
.volet .liste-crochets { flex: 1; align-content: start; margin-bottom: 0; }
.volet-note { margin: 22px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--fond-doux); font-size: .95rem; color: var(--texte-doux); }
.volet-note strong { display: block; color: var(--marine); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
@media (max-width: 860px) { .volets { grid-template-columns: 1fr; } }

.demarrage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.demarrage .liste-crochets { margin: 0; }
@media (max-width: 860px) { .demarrage { grid-template-columns: 1fr; gap: 24px; } }

.tuiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .tuiles-4 { grid-template-columns: 1fr; } }

.bande-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-bottom: 48px; }
.bande-photo .section-tete { margin-bottom: 0; }
@media (max-width: 860px) { .bande-photo { grid-template-columns: 1fr; gap: 28px; } }
.demarrage .service-icone { display: grid; }

/* Services, refonte (WEB.5, plan : pages/services-plan.md). Chaque service : le texte, « Idéal pour » dessous, et un
   panneau sur toute la hauteur où une carte de la même PME fictive reste en vue (le fil du dossier). Mêmes jetons que
   l'accueil : cartes blanches à 20 px, panneaux à 24 px, ombres profondes, pastilles rondes. */
.service-dossier { padding: 88px 0 96px; }
.service-dossier h2, .partie-fiscalite h2 { text-wrap: balance; }
.partie-tete + .service-dossier { padding-top: 56px; }
.dossier-grille { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "texte panneau" "aparte panneau"; column-gap: 64px; row-gap: 36px; align-items: start; }
.dossier-grille-inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "panneau texte" "panneau aparte"; }
.dossier-grille-large { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: 56px; }
.dossier-texte { grid-area: texte; }
.dossier-aparte { grid-area: aparte; margin-top: 0; }
.dossier-panneau { grid-area: panneau; align-self: stretch; position: relative; border-radius: 24px; padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(520px 320px at 100% 0%, rgba(58,108,244,.38), transparent 65%), linear-gradient(150deg, var(--marine) 0%, #1d4596 100%); box-shadow: 0 30px 60px rgba(16, 36, 72, .2); }
.dossier-panneau::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 90%); pointer-events: none; }
.dossier-panneau-pale { background: radial-gradient(480px 300px at 0% 0%, rgba(58,108,244,.12), transparent 65%), linear-gradient(160deg, #e6ecf8 0%, #d5e0f3 100%); box-shadow: none; }
.dossier-panneau-pale::before { background-image: linear-gradient(rgba(20,48,94,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(20,48,94,.055) 1px, transparent 1px); }
.dossier-panneau-nu { background: none; box-shadow: none; padding: 0; }
.dossier-panneau-nu::before { content: none; }
.dossier-scene { position: sticky; top: 118px; padding-top: 60px; }
.dossier-scene-libre, .dossier-panneau-nu .dossier-scene { padding-top: 0; }
.dossier-scene-libre { position: relative; top: auto; }
/* Derrière, la pièce d'avant (le mois précédent, les notes) : plus petite, plus pâle, comme la trésorerie de l'accueil. */
.fiche-arriere { position: absolute; top: 0; left: 26px; right: 26px; height: 110px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 15px 20px; background: #fff; border-radius: 18px; opacity: .9; box-shadow: 0 24px 50px rgba(4, 14, 34, .35); }
.dossier-panneau-pale .fiche-arriere { box-shadow: 0 14px 30px rgba(16, 36, 72, .12); }
.fiche-arriere .fiche-titre { font-size: 1rem; color: var(--texte-doux); }
.fiche-arriere .fiche-titre span { color: var(--texte-doux); }
.fiche-arriere .pastille { white-space: nowrap; }
.fiche { position: relative; background: #fff; border-radius: 20px; padding: 22px 24px 34px; color: var(--texte); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 40px 80px rgba(4, 14, 34, .45), 0 4px 12px rgba(4, 14, 34, .15); }
.dossier-panneau-pale .fiche { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 30px 60px rgba(16, 36, 72, .18), 0 3px 10px rgba(16, 36, 72, .08); }
.fiche-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.fiche-tete .pastille { white-space: nowrap; }
.fiche-titre { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--marine); }
.fiche-titre span { color: var(--bleu); }
.pastille-bleue { background: var(--bleu-pale); color: var(--bleu); }
.fiche-lignes { list-style: none; margin: 0; padding: 0; display: grid; }
.fiche-lignes li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid #eef1f6; font-size: .92rem; line-height: 1.3; }
.fiche-lignes li:last-child { border-bottom: 0; }
.fiche-lignes .icone { width: 1.5em; height: 1.5em; padding: 4px; border-radius: 99px; background: #e3f4ec; color: var(--vert); }
.fiche-lignes b { font-weight: 600; color: var(--marine); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fiche-lignes .a-suivre .icone { background: var(--bleu-pale); color: var(--bleu); }
.fiche-lignes .a-suivre b { color: var(--bleu); }
.fiche-dates em { display: block; font-style: normal; font-size: .74rem; font-weight: 600; color: var(--texte-doux); }
.fiche-sous { margin: 16px 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.fiche-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fiche-chiffres p { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--fond-doux); line-height: 1.25; }
.fiche-chiffres span { display: block; font-size: .74rem; color: var(--texte-doux); }
.fiche-chiffres strong { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--marine); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fiche-chiffres em { display: block; margin-top: 2px; font-style: normal; font-size: .72rem; color: var(--texte-doux); }
/* Le fil du dossier : le bénéfice, d'une section à l'autre, porte toujours cette marque. */
.fiche .fil-marque { background: var(--bleu-pale); box-shadow: inset 0 0 0 1.5px var(--bleu); border-radius: 8px; padding: 2px 8px; color: var(--marine); transition: background .4s ease-out, box-shadow .4s ease-out; }
.fiche .fiche-chiffres .fil-marque { padding: 10px 12px; border-radius: 12px; }
.fiche-chiffres .fil-marque span, .fiche-chiffres .fil-marque em { color: var(--bleu); }
.fiche-pied { margin: 12px 0 0; font-size: .76rem; font-style: italic; color: var(--texte-doux); }
.piece-paie { position: relative; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 100%; margin: -20px -16px 0 auto; background: #fff; border-radius: 14px; padding: 13px 18px; font-size: .88rem; color: var(--texte); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 44px rgba(4, 14, 34, .4), 0 3px 8px rgba(4, 14, 34, .12); }
.dossier-panneau-pale .piece-paie { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 36px rgba(16, 36, 72, .2), 0 3px 8px rgba(16, 36, 72, .08); }
.piece-paie p { margin: 0; line-height: 1.35; }
.piece-paie strong { display: block; color: var(--marine); }
.piece-paie span { color: var(--texte-doux); }
.piece-paie .icone { width: 2.2em; height: 2.2em; padding: 7px; border-radius: 10px; background: var(--bleu-pale); color: var(--bleu); }

/* États financiers : une feuille, l'état des résultats et le bilan abrégés. */
.feuille-tete { padding-bottom: 12px; border-bottom: 1px solid #eef1f6; }
.feuille-entreprise { margin: 0 0 2px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.feuille-date { margin: 2px 0 0; font-size: .82rem; color: var(--texte-doux); }
.feuille-table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.3; }
.feuille-table th, .feuille-table td { padding: 6px 0; border: 0; background: none; }
.feuille-table th { text-align: left; font-weight: 400; color: var(--texte); }
.feuille-table td { text-align: right; font-weight: 600; color: var(--marine); font-variant-numeric: tabular-nums; white-space: nowrap; }
.feuille-total th, .feuille-total td { border-top: 1px solid var(--bordure); padding-top: 8px; font-weight: 600; color: var(--marine); }
.feuille-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.feuille-pied .fiche-pied { margin: 0 0 0 auto; }

/* Le moment fort : réel contre budget. La ligne du réel se trace au défilement (site.js, data-trace). */
.service-fort { padding: 120px 0 128px; }
.fiche.tableau { padding: 24px 26px 34px; }
.tableau-graph { display: block; width: 100%; height: auto; margin: 16px 0 6px; }
.tableau-graph .grille line { stroke: #e8edf5; stroke-width: 1; }
.tableau-graph text { font: 500 11px var(--sans); fill: var(--texte-doux); }
.tableau-graph .mois text { text-anchor: middle; }
.tableau-graph .mois-courant { fill: var(--bleu); font-weight: 700; }
.tableau-graph .budget { fill: none; stroke: var(--marine); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; opacity: .55; }
.tableau-graph .aire { fill: url(#aire-reel); }
.tableau-graph .reel { fill: none; stroke: var(--bleu); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.tableau-graph .point-oct { fill: #fff; stroke: var(--bleu); stroke-width: 3; }
.tableau-legende { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .76rem; color: var(--texte-doux); }
.tableau-legende i { display: inline-block; width: 16px; height: 4px; border-radius: 2px; background: var(--bleu); }
.tableau-legende .l-budget { margin-left: 10px; background: repeating-linear-gradient(90deg, var(--marine) 0 5px, transparent 5px 9px); opacity: .6; }
.tableau-legende span { margin-left: auto; font-style: italic; }
.en-cours [data-trace-marque] { background: var(--fond-doux); box-shadow: none; }
.en-cours [data-trace-marque] span, .en-cours [data-trace-marque] em { color: var(--texte-doux); }

/* Fiscalité : la carte des échéances remplace la photo. */
.partie-fiscalite { padding-bottom: 24px; }
.partie-fiscalite .vedette { align-items: stretch; }
.partie-fiscalite .dossier-panneau { grid-area: auto; }
.partie-fiscalite .vedette > div:first-child { align-self: center; }

/* Démarrage : les quatre décisions, dans leur ordre. */
.demarrage-pile { display: grid; gap: 40px; }
.demarrage-tete .chapeau { margin-bottom: 0; }
.etapes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etapes-4 li { padding: 26px; box-shadow: var(--ombre); border-color: transparent; }
.etapes-4 .etape-num { margin-bottom: 14px; }
.etapes-4 p { color: var(--texte); }

/* Les cartes se posent une fois, quand elles entrent dans l'écran (site.js, data-pose) ; la marque arrive en dernier. */
.pose-actif [data-pose] .fiche-lignes li, .pose-actif [data-pose] .feuille-table tr, .pose-actif [data-pose] .fiche-chiffres .fil-marque, .pose-actif [data-pose] .piece-paie { opacity: 0; transform: translateY(8px); transition: opacity .45s ease-out, transform .45s ease-out; transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.pose-actif [data-pose].pose .fiche-lignes li, .pose-actif [data-pose].pose .feuille-table tr, .pose-actif [data-pose].pose .fiche-chiffres .fil-marque, .pose-actif [data-pose].pose .piece-paie { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pose-actif [data-pose] .fiche-lignes li, .pose-actif [data-pose] .feuille-table tr, .pose-actif [data-pose] .fiche-chiffres .fil-marque, .pose-actif [data-pose] .piece-paie { opacity: 1; transform: none; }
}

/* Sous-listes repliables : ouvertes sur ordinateur (le titre n'est qu'un titre), repliées sur téléphone (site.js). */
.repli > summary { display: block; list-style: none; cursor: default; }
.repli > summary::-webkit-details-marker { display: none; }
.volet .repli { flex: 1; }

@media (max-width: 1100px) { .etapes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .service-dossier, .service-fort { padding: 64px 0 72px; }
  .dossier-grille, .dossier-grille-inverse, .dossier-grille-large { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "panneau" "aparte"; row-gap: 28px; }
  .dossier-panneau { padding: 22px 16px 20px; border-radius: 20px; }
  .dossier-panneau-nu { padding: 0; }
  .dossier-scene { position: relative; top: auto; padding-top: 40px; }
  .dossier-scene-libre { padding-top: 0; }
  .fiche-arriere { left: 0; right: 0; padding: 11px 16px; border-radius: 16px; }
  .fiche-arriere .fiche-titre { font-size: .9rem; }
  .fiche-arriere .pastille { display: none; }
  .fiche, .fiche.tableau { padding: 18px 16px 16px; border-radius: 16px; }
  .fiche-tete { flex-wrap: wrap; row-gap: 8px; }
  .fiche-lignes li { gap: 10px; font-size: .86rem; }
  .fiche-chiffres { gap: 6px; }
  .fiche .fiche-chiffres p, .fiche .fiche-chiffres .fil-marque { padding: 8px 9px; }
  .fiche-chiffres strong { font-size: 1.02rem; }
  .fiche-chiffres em { font-size: .68rem; }
  .tableau .fiche-chiffres { grid-template-columns: minmax(0, 1fr); }
  .fiche.tableau .fiche-chiffres p { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 8px 12px; }
  .tableau .fiche-chiffres em { grid-row: 2; margin-top: 0; }
  .tableau .fiche-chiffres strong { grid-column: 2; grid-row: 1 / span 2; font-size: 1.15rem; }
  .tableau-graph text { font-size: 17px; }
  .feuille-table { font-size: .86rem; }
  .feuille-pied .fiche-pied { margin-left: 0; width: 100%; }
  .piece-paie { width: auto; margin: 14px 0 0; padding: 12px 14px; font-size: .84rem; }
  .partie-fiscalite .vedette { gap: 28px; }

  .repli { margin-top: 12px; border: 1px solid var(--bordure); border-radius: 14px; background: #fff; }
  .repli > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 8px 16px; cursor: pointer; border-radius: 13px; }
  .repli > summary > * { margin: 0; font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--marine); }
  .repli > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: rotate(45deg); transition: transform .2s ease-out, margin .2s ease-out; }
  .repli[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .repli > .liste-crochets { padding: 4px 16px 18px; }
  .service-marine .repli { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
  .service-marine .repli > summary > * { color: #fff; }
  .service-marine .repli > summary::after { border-color: var(--bleu-ciel); }
  .volet { padding: 26px 22px; }
  .volet .repli { border: 0; border-radius: 0; background: none; margin: 0; flex: 1; }
  .volet .repli > summary { padding: 6px 0; border-radius: 8px; }
  .volet .repli > summary > * { font-family: var(--serif); font-size: 1.4rem; }
  .volet .repli > .liste-crochets { padding: 10px 0 0; }
}
@media (max-width: 560px) { .etapes-4 { grid-template-columns: minmax(0, 1fr); } }

/* En-tête foncé, logo en blanc (choix de Loup, 2026-09-27) */
.entete { background: var(--marine); border-bottom-color: rgba(255,255,255,.08); backdrop-filter: none; }
.menu a:not(.bouton) { color: #dbe4f4; }
.menu a:not(.bouton):hover { background: rgba(255,255,255,.08); color: #fff; }
.menu a[aria-current="page"] { color: var(--bleu-ciel); }
.menu-appel .bouton:hover { background: var(--bleu-vif); border-color: var(--bleu-vif); }
.menu-bouton { color: #fff; border-color: rgba(255,255,255,.35); }
@media (max-width: 1140px) {
  .entete nav { background: var(--marine); border-bottom-color: rgba(255,255,255,.08); }
}

/* Blogue (WEB.8) : fil d'Ariane, avis, texte d'article, sujets à venir */
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: .9rem; color: var(--texte-doux); }
.fil li + li::before { content: "›"; margin-right: 6px; color: var(--texte-doux); }
.fil a { text-decoration: none; }
.titre-article { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.article-dates { margin: 0; font-size: .92rem; color: var(--texte-doux); }
.avis { margin: 0 0 32px; padding: 14px 18px; border-left: 4px solid var(--bleu); border-radius: 0 10px 10px 0; background: var(--bleu-pale); font-size: .95rem; color: var(--marine); }
.article h2 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); margin-top: 1.6em; }
.article h3 { margin-top: 1.4em; }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 1em; }
.article li { margin-bottom: .35em; }
.article hr { border: 0; border-top: 1px solid var(--bordure); margin: 2em 0; }
.article .tableau-defile { margin: 0 0 1.4em; }
.article td:first-child { white-space: normal; width: auto; }
.article a { overflow-wrap: anywhere; }
.lien-titre { color: inherit; text-decoration: none; }
.lien-titre:hover { color: var(--bleu); }
.a-venir-titre { margin: 28px 0 8px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.a-venir { margin: 0; padding-left: 1.2em; color: var(--texte-doux); }

/* Pages intérieures, refonte (WEB.5, plans : pages/<page>-plan.md). Mêmes jetons que Services : panneaux à 24 px, cartes à
   18-20 px, pastilles rondes, ombres profondes ; un moment fort par page. */
a[href^="tel:"] { white-space: nowrap; }
.pose-actif [data-pose] .apparait { opacity: 0; transform: translateY(10px); transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: calc(min(var(--i, 0), 6) * 90ms + 100ms); }
.pose-actif [data-pose].pose .apparait { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pose-actif [data-pose] .apparait { opacity: 1; transform: none; } }

/* Merci : un seul bloc. */
.entete-merci { padding: 104px 0 112px; border-bottom: 0; }
.merci-crochet { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 99px; background: #e3f4ec; color: var(--vert); margin-bottom: 24px; }
.merci-crochet .icone { width: 30px; height: 30px; }
.merci-retour { margin: 32px 0 0; }

/* À propos : la lettre. */
.lettre { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); grid-template-areas: "cote texte"; column-gap: 72px; margin: 0 auto; }
/* Le nom et le rendez-vous collent ensemble (WEB.12) : une seule colonne collante, alignée en haut pour pouvoir glisser. */
.lettre-cote { grid-area: cote; align-self: start; }
.lettre-tete { grid-area: tete; display: block; margin: 0; }
.lettre-guillemet { display: block; height: 76px; font-family: var(--serif); font-size: 9rem; line-height: 1; color: var(--bleu); }
.lettre .citation-titre { display: block; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; margin: 0; text-wrap: balance; }
.lettre-appel { grid-area: appel; margin: 32px 0 0; align-self: start; }
.lettre-texte { grid-area: texte; margin: 0; padding-left: 48px; border-left: 2px solid var(--bleu-pale); }
.lettre-texte p { font-size: 1.12rem; color: #35424f; }
.lettre-texte p:first-child { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.5rem); line-height: 1.5; color: var(--marine); }
.lettre-texte p:last-child { margin-bottom: 0; }

/* À propos : les valeurs. */
.valeurs-cadre { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 56px; align-items: center; }
.valeurs-cadre h2 { margin: 0; text-wrap: balance; }
.valeurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.valeur { background: #fff; border-radius: 20px; padding: 28px 26px; box-shadow: var(--ombre); }
.valeur .service-icone { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px; }
.valeur .service-icone .icone { width: 24px; height: 24px; }
.valeur h3 { margin-bottom: .35em; }
.valeur p { margin: 0; color: var(--texte-doux); }

/* À propos : l'équipe (moment fort). */
.equipe-section { padding: 112px 0 120px; }
.equipe-section h2 { max-width: 16em; margin-bottom: 48px; text-wrap: balance; }
.equipe2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.membre2 { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.membre2-portrait { flex: none; width: 112px; height: 112px; border-radius: 24px; overflow: hidden; background: #1d4596; box-shadow: 0 14px 30px rgba(4, 14, 34, .35); }
/* Cadrage sur le visage : les portraits sont en pied ; --zoom et --y (hauteur du visage) sont réglés photo par photo. */
.membre2-portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transform-origin: var(--x, 50%) var(--y, 50%); }
.membre2-monogramme { display: grid; place-items: center; background: linear-gradient(150deg, rgba(143,176,255,.2) 0%, rgba(143,176,255,.06) 100%); box-shadow: inset 0 0 0 1px rgba(143,176,255,.4), 0 14px 30px rgba(4, 14, 34, .25); }
.membre2-monogramme span { font-family: var(--serif); font-size: 2.3rem; font-weight: 500; letter-spacing: .04em; color: var(--bleu-ciel); }
.membre2 h3 { color: #fff; margin-bottom: .15em; font-size: 1.22rem; }
.membre2 .membre-titre { color: var(--bleu-ciel); }
.membre2-texte p { font-size: .95rem; color: #c7d3ea; }
.membre2-texte { flex: 1; display: flex; flex-direction: column; }
.membre2 .membre-courriel { margin: auto 0 0; }
.membre2 .membre-courriel a { color: #fff; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.membre2 .membre-courriel a:hover { text-decoration-color: #fff; }
.membre2-tete { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 36px; padding: 28px; background: rgba(255,255,255,.09); }
.membre2-tete .membre2-portrait { width: 200px; height: 200px; border-radius: 24px; }
.membre2-tete h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.membre2-tete .membre2-texte p:not(.membre-titre):not(.membre-courriel) { font-size: 1.1rem; max-width: 34em; }

/* À propos : la région, en cercles autour du bureau. */
.region { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.region-visuel { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: 128px 32px 32px; background: radial-gradient(480px 300px at 0% 0%, rgba(58,108,244,.12), transparent 65%), linear-gradient(160deg, #e6ecf8 0%, #d5e0f3 100%); }
.region-cercles { position: relative; width: min(100%, 330px); aspect-ratio: 1; margin: 0 auto; }
/* La carte du Québec en fond (images/carte-quebec.svg, Natural Earth) : son point 0,0, le bureau, est à 50 % et 60,938 %
   de l'image ; on le pose sur le centre des cercles. Échelle liée aux cercles (158 % de leur largeur), pour que le bureau
   tombe juste à toutes les largeurs ; le haut du panneau est plus haut pour montrer toute la province. */
.region-carte { position: absolute; z-index: -1; left: 50%; top: 50%; width: 158%; max-width: none; height: auto; transform: translate(-50%, -60.938%); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 90%); mask-image: linear-gradient(180deg, #000 70%, transparent 90%); }
.region-anneau { position: absolute; border-radius: 50%; display: flex; justify-content: center; }
.region-anneau em { margin-top: -12px; height: fit-content; padding: 4px 12px; border-radius: 99px; background: #fff; font-style: normal; font-size: .8rem; font-weight: 600; color: var(--marine); white-space: nowrap; box-shadow: 0 6px 16px rgba(16, 36, 72, .12); }
.region-anneau-3 { inset: 0; border: 1.5px dashed rgba(20,48,94,.35); }
.region-anneau-2 { inset: 21%; background: rgba(255,255,255,.14); border: 1.5px solid rgba(36,81,214,.35); }
.region-anneau-1 { inset: 39%; background: rgba(36,81,214,.1); }
/* Le repère : l'épingle seule, en marine ; sa pointe (21/24 de la hauteur de l'icône) touche le centre des cercles, le bureau. */
.region-centre { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; translate: -50% -87.5%; color: var(--marine); filter: drop-shadow(0 6px 8px rgba(16, 36, 72, .3)); }
.region-centre .icone { display: block; width: 100%; height: 100%; fill: var(--marine); stroke: #fff; stroke-width: 1.4; }
.pose-actif [data-pose] .region-anneau.apparait { transform: scale(.85); }
.pose-actif [data-pose].pose .region-anneau.apparait { transform: none; }
.region-adresse { position: relative; display: flex; flex-direction: column; width: max-content; max-width: 100%; margin: 24px auto 0; padding: 12px 18px; border-radius: 14px; background: #fff; font-size: .9rem; color: var(--texte-doux); line-height: 1.35; text-align: center; box-shadow: 0 14px 30px rgba(16, 36, 72, .14); }
.region-adresse strong { color: var(--marine); }
.region-texte .chapeau { margin-bottom: 0; }

/* Espace clients : quatre grandes tuiles de liens, puis les dates en pages d'agenda (la prochaine en vedette, calculée par
   site.js), qu'on filtre selon qui on est. Couleur de chaque public : .public-emp, -part, -auto, -soc, -tax. */
.cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.entete-clients { background-position: center 62%; }
.liens-section { padding: 80px 0 88px; }
.liens-section h2 { margin-bottom: 32px; }
.tuiles-liens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tuiles-liens a { display: flex; flex-direction: column; height: 100%; padding: 26px 24px 22px; border-radius: 20px; border: 1px solid var(--bordure); background: #fff; color: var(--texte); text-decoration: none; box-shadow: var(--ombre); transition: border-color .15s, box-shadow .15s, transform .15s; }
.tuiles-liens a:hover { border-color: #b9cbf3; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(16, 36, 72, .12); color: var(--texte); }
.tl-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--bleu-pale); color: var(--bleu); margin-bottom: 22px; }
.tl-icone .icone { width: 26px; height: 26px; }
.tl-org { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--marine); margin-bottom: 10px; }
.tl-titre { font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--texte); }
.tl-note { margin-top: 4px; font-size: .9rem; line-height: 1.4; color: var(--texte-doux); }
.tl-pied { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 22px; font-size: .86rem; font-weight: 600; color: var(--bleu); overflow-wrap: anywhere; }
.tl-pied .icone { width: 15px; height: 15px; transition: transform .15s; }
.tuiles-liens a:hover .tl-pied .icone { transform: translate(2px, -2px); }

.dates2 { padding: 96px 0 104px; }
.dates2-tete .chapeau { margin-bottom: 0; }
.filtre { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; }
.filtre[hidden] { display: none; }
.filtre button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .92rem; font-weight: 500; min-height: 44px; padding: 8px 18px; border-radius: 99px; border: 1px solid var(--bordure); background: #fff; color: var(--marine); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.filtre button:hover { border-color: var(--bleu); }
.filtre button[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: #fff; font-weight: 600; }
.pastille-public { width: 10px; height: 10px; border-radius: 99px; background: var(--c); }
.filtre button[aria-pressed="true"] .pastille-public { box-shadow: 0 0 0 2px #fff; }

/* Les publics : texte foncé sur fond pâle (contraste AA), même teinte pour la pastille du filtre. */
.public-emp { --c: #2451d6; --fondc: #e6edfc; --textec: #1d43b3; }
.public-part { --c: #1f8a5b; --fondc: #e1f3ea; --textec: #166b46; }
.public-auto { --c: #c27a12; --fondc: #fcf0dc; --textec: #84500a; }
.public-soc { --c: #7a4fd0; --fondc: #efe9fb; --textec: #5a36a5; }
.public-tax { --c: #12809a; --fondc: #e0f2f5; --textec: #0f6175; }
.publics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.public { display: inline-block; padding: 3px 11px; border-radius: 99px; background: var(--fondc); color: var(--textec); font-size: .8rem; font-weight: 600; line-height: 1.5; }

/* La prochaine échéance (moment fort) : grande carte marine ; à droite, ce qui suit. */
.prochaine { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); margin: 36px 0 64px; border-radius: 24px; overflow: hidden; color: #dbe4f4; background: radial-gradient(620px 340px at 100% 0%, rgba(58,108,244,.4), transparent 65%), linear-gradient(150deg, var(--marine) 0%, #1d4596 100%); box-shadow: 0 30px 60px rgba(16, 36, 72, .22); }
.prochaine[hidden] { display: none; }
.prochaine-vedette { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: start; align-content: start; padding: 36px 36px 34px; }
.prochaine-vedette > .agenda { grid-row: 1 / span 9; }
.prochaine-vedette > .echeance-corps { grid-column: 2; }
.prochaine-etiquette { margin: 0 0 12px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu-ciel); }
.prochaine-quand { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 99px; background: rgba(143,176,255,.18); color: #fff; font-size: .88rem; font-weight: 600; }
.prochaine-vedette .publics { margin-bottom: 10px; }
.prochaine-vedette .echeance-corps p:last-child { margin: 0; color: #e6edf9; font-size: 1.05rem; }
.prochaine-vedette > .echeance-corps + .echeance-corps { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.prochaine-vedette .echeance-corps strong { color: #fff; }
.prochaine .agenda { width: 124px; }
.prochaine .agenda-haut { background: var(--bleu-vif); }
.prochaine .agenda-jour { font-size: 3.6rem; }
.prochaine-suite { padding: 32px 32px 30px; background: rgba(4, 14, 34, .18); border-left: 1px solid rgba(255,255,255,.1); }
/* La colonne des dates prend la largeur de la plus longue (« 31 janvier 2027 ») et toutes les lignes s'y alignent (subgrid) :
   la pastille ne chevauche plus la date (WEB.12). */
.prochaine-suite ol { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; list-style: none; margin: 0; padding: 0; }
.prochaine-suite li { grid-column: 1 / -1; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-columns: subgrid; }
.prochaine-suite li + li { border-top: 1px solid rgba(255,255,255,.1); }
.prochaine-suite a { grid-column: 1 / -1; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-columns: subgrid; column-gap: 14px; align-items: baseline; padding: 14px 0; color: #fff; text-decoration: none; }
.prochaine-suite a:hover .suite-date { text-decoration: underline; text-underline-offset: 3px; }
.suite-date { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; white-space: nowrap; }
.suite-qui { display: flex; flex-wrap: wrap; gap: 6px; }

/* Une page d'agenda : le haut en couleur (mois, ou la règle), le jour en gros. */
.agenda { flex: none; display: flex; flex-direction: column; align-items: center; width: 100px; margin: 0; border-radius: 14px; overflow: hidden; background: #fff; text-align: center; box-shadow: 0 1px 0 rgba(16, 36, 72, .06), 0 10px 24px rgba(16, 36, 72, .12); }
.agenda-haut { align-self: stretch; padding: 6px 6px 5px; background: var(--marine); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .05em; line-height: 1.25; text-transform: uppercase; }
.agenda-jour { padding: 4px 4px 0; font-family: var(--serif); font-size: 2.6rem; font-weight: 600; line-height: 1.1; color: var(--marine); font-variant-numeric: lining-nums; }
.agenda-jour.agenda-mot { font-size: 1.9rem; line-height: 1.45; }
.agenda-bas { padding: 0 6px 9px; font-size: .7rem; font-weight: 500; line-height: 1.25; color: var(--texte-doux); }
.agenda-jour:last-child { padding-bottom: 8px; }
.echeances2-retour .agenda-haut { background: var(--bleu); }
.echeances2-relatif .agenda-haut { background: var(--ardoise); }
.echeances2-relatif .agenda-jour { color: var(--ardoise); }

.echeances-groupe + .echeances-groupe { margin-top: 56px; }
.groupe-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 1.35rem; }
.groupe-titre .icone { width: 1.1em; height: 1.1em; color: var(--bleu); }
.echeances-groupe[hidden] { display: none; }
.echeances2.echeances2-retour { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Trois cartes côte à côte : la page d'agenda et les publics en tête, le texte sur toute la largeur dessous. */
.echeances2-retour .echeance { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; align-items: center; align-content: start; }
.echeances2-retour .echeance > .echeance-corps { display: contents; }
.echeances2-retour .publics { margin: 0; }
.echeances2-retour .echeance-corps > p:last-child { grid-column: 1 / -1; }
.echeances2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.echeance { display: flex; gap: 22px; align-items: flex-start; padding: 22px 24px 22px 22px; border-radius: 20px; background: #fff; border: 1px solid #e3e9f2; scroll-margin-top: 110px; }
.echeance[hidden] { display: none; }
.echeance:target { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(36,81,214,.15); }
.echeance-corps { min-width: 0; }
.echeance-corps p { margin: 0; }
.echeance-corps > p:last-child { color: #35424f; line-height: 1.55; }
.echeance-corps strong { color: var(--marine); }
.dates2 .note { display: flex; gap: 10px; align-items: flex-start; margin-top: 36px; color: var(--texte-doux); }
.dates2 .note .icone { color: var(--bleu); margin-top: 2px; }

/* Carrières : les trois atouts, puis un seul bloc « Postes et stages » sur marine, avec le bouton de candidature. */
.atouts-section { padding: 96px 0 104px; }
.atouts2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.atout2 { padding: 36px 32px 34px; border-radius: 24px; background: linear-gradient(165deg, #eef3fd 0%, #f8faff 70%); border: 1px solid #dfe7f6; }
.atout2-icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(150deg, var(--bleu-vif), var(--bleu)); color: #fff; box-shadow: 0 12px 24px rgba(36, 81, 214, .28); margin-bottom: 26px; }
.atout2-icone .icone { width: 30px; height: 30px; }
.atout2 h3 { font-size: 1.45rem; margin-bottom: .4em; }
.atout2 p { margin: 0; font-size: 1.08rem; color: #3d4b59; }

.postes-section { padding: 104px 0 112px; }
.postes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.postes-liste { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.postes-liste li { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.postes-icone { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(143,176,255,.18); color: var(--bleu-ciel); }
.postes-icone .icone { width: 24px; height: 24px; }
.postes-liste h3 { font-size: 1.2rem; margin-bottom: .25em; }
.postes-liste p { margin: 0; color: #dbe4f4; }
.postes-action { padding: 40px 38px 38px; border-radius: 24px; background: #fff; color: var(--texte); box-shadow: 0 40px 80px rgba(4, 14, 34, .4); }
.postes-action-icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--bleu-pale); color: var(--bleu); margin-bottom: 22px; }
.postes-action-icone .icone { width: 28px; height: 28px; }
.section-marine .postes-action h3 { color: var(--marine); font-size: 1.6rem; margin-bottom: .4em; }
.postes-action p { font-size: 1.1rem; color: var(--texte-doux); margin-bottom: 26px; }
.postes-action p a { font-weight: 600; text-underline-offset: 3px; }

/* Nous joindre : la carte de visite du cabinet (marine) à côté du formulaire (moment fort). Formulaires et carte Google
   inchangés : seule leur présentation change. */
.joindre-section { padding: 88px 0 104px; }
.joindre2 { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 28px; }
.coordonnees2 { position: relative; padding: 34px 30px 30px; border-radius: 24px; color: #dbe4f4; background: radial-gradient(520px 320px at 100% 0%, rgba(58,108,244,.38), transparent 65%), linear-gradient(150deg, var(--marine) 0%, #1d4596 100%); box-shadow: 0 30px 60px rgba(16, 36, 72, .2); }
.coordonnees2 > p { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.coordonnees2 > p:first-child { padding-top: 0; }
.coordonnees2 > p > .icone { width: 2.3em; height: 2.3em; padding: 8px; border-radius: 12px; background: rgba(143,176,255,.18); color: var(--bleu-ciel); }
.coordonnees2 strong { display: block; color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.coordonnees2 a { color: #fff; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); }
.coordonnees2 a:hover { color: #fff; text-decoration-color: #fff; }
.coordonnees2 .carte-geo { margin-top: 22px; border: 0; border-radius: 16px; background: #fff; color: var(--texte); }
.coordonnees2 .carte-geo a { color: var(--bleu); }
.coordonnees2 .carte-geo iframe { height: 260px; }
.joindre-formulaires { padding: 30px 34px 34px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(16, 36, 72, .05), 0 30px 60px rgba(16, 36, 72, .12); }
.joindre2 .onglets { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 26px; border: 0; border-radius: 99px; background: var(--fond-doux); }
.joindre2 .onglets button { margin: 0; padding: 10px 20px; border: 0; border-radius: 99px; color: var(--texte-doux); transition: background .15s, color .15s, box-shadow .15s; }
.joindre2 .onglets button:hover { color: var(--marine); }
.joindre2 .onglets button[aria-selected="true"] { background: #fff; color: var(--marine); box-shadow: 0 2px 8px rgba(16, 36, 72, .12); }
.joindre2 .formulaire .bouton[type="submit"] { padding: 14px 26px; }

@media (min-width: 861px) { .lettre-cote { position: sticky; top: 120px; } .coordonnees2 { position: sticky; top: 110px; } }
@media (max-width: 1100px) {
  .atouts2 { gap: 16px; }
  .atout2 { padding: 30px 24px 28px; }
  .tuiles-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .echeances2, .echeances2.echeances2-retour { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .valeurs-cadre { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .equipe2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lettre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "texte" "appel"; }
  .lettre-cote { display: contents; }
  .lettre-guillemet { font-size: 6.5rem; height: 52px; }
  .lettre .citation-titre { margin-bottom: 24px; }
  .lettre-texte { padding-left: 20px; }
  .lettre-appel { margin-top: 28px; }
  .valeurs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .valeur { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .valeur .service-icone { grid-row: 1 / span 2; margin: 0; }
  .equipe-section { padding: 72px 0 80px; }
  .equipe-section h2 { margin-bottom: 32px; }
  .region { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .region-texte { order: -1; }
  .region-visuel { padding: 118px 18px 24px; }
  .liens-section { padding: 56px 0 64px; }
  .liens-section h2 { margin-bottom: 22px; }
  .tuiles-liens { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tuiles-liens a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 18px 18px 16px; border-radius: 18px; }
  .tl-icone { grid-row: 1 / span 4; width: 46px; height: 46px; border-radius: 13px; margin: 0; }
  .tl-org { font-size: 1.15rem; margin-bottom: 4px; }
  .tl-pied { padding-top: 10px; }
  .dates2 { padding: 64px 0 72px; }
  .filtre { margin-top: 24px; gap: 6px; }
  .filtre button { padding: 8px 14px; font-size: .88rem; }
  .prochaine { grid-template-columns: minmax(0, 1fr); margin: 28px 0 44px; border-radius: 20px; }
  .prochaine-vedette { column-gap: 18px; padding: 24px 20px 22px; }
  .prochaine-vedette > .agenda { grid-row: auto; }
  .prochaine-vedette > .echeance-corps { grid-column: 1 / -1; margin-top: 18px; }
  .prochaine .agenda { width: 92px; }
  .prochaine .agenda-jour { font-size: 2.6rem; }
  .prochaine-suite { padding: 18px 20px 14px; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .echeances2, .echeances2.echeances2-retour { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .echeance { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; padding: 16px; border-radius: 18px; }
  .echeance > .echeance-corps { display: contents; }
  .echeance .publics { margin: 0; }
  .echeance .echeance-corps > p:last-child { grid-column: 1 / -1; }
  .agenda { width: 76px; border-radius: 12px; }
  .agenda-haut { font-size: .6rem; letter-spacing: .05em; }
  .agenda-jour { font-size: 2.1rem; }
  .agenda-jour.agenda-mot { font-size: 1.5rem; }
  .agenda-bas { font-size: .64rem; }
  .echeances-groupe + .echeances-groupe { margin-top: 44px; }
  .groupe-titre { font-size: 1.2rem; align-items: flex-start; }
  .groupe-titre .icone { margin-top: 3px; }
  .atouts-section { padding: 64px 0 72px; }
  .atouts2 { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 28px; }
  .atout2 { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; padding: 22px 20px; border-radius: 20px; }
  .atout2-icone { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 15px; margin: 0; }
  .atout2-icone .icone { width: 26px; height: 26px; }
  .atout2 h3 { font-size: 1.2rem; }
  .atout2 p { font-size: 1rem; }
  .postes-section { padding: 64px 0 72px; }
  .postes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .postes-liste { margin-top: 22px; gap: 12px; }
  .postes-liste li { gap: 14px; padding: 18px; border-radius: 18px; }
  .postes-icone { width: 42px; height: 42px; border-radius: 12px; }
  .postes-action { padding: 28px 22px 26px; border-radius: 20px; }
  .postes-action .bouton { display: flex; width: 100%; }
  .joindre-section { padding: 48px 0 72px; }
  .joindre2 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .coordonnees2 { padding: 24px 20px 20px; border-radius: 20px; }
  .joindre-formulaires { padding: 20px 16px 24px; border-radius: 20px; }
  .joindre2 .onglets { display: flex; }
  .joindre2 .onglets button { flex: 1; padding: 10px 8px; font-size: .92rem; line-height: 1.25; }
}
@media (max-width: 640px) {
  .equipe2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .membre2, .membre2-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 12px; align-items: center; padding: 20px; }
  .membre2-portrait, .membre2-tete .membre2-portrait { width: 72px; height: 72px; border-radius: 18px; }
  .membre2-monogramme span { font-size: 1.6rem; }
  .membre2-texte { display: contents; }
  .membre2-nom h3 { font-size: 1.15rem; }
  .membre2-nom .membre-titre { margin: 0; }
  .membre2-texte > p { grid-column: 1 / -1; margin: 0; }
  .membre2-tete h3 { font-size: 1.3rem; }
  .membre2-tete .membre2-portrait { width: 88px; height: 88px; }
  .membre2-tete .membre2-portrait img { --zoom: 1.6; --y: 18%; }
  .membre2-tete .membre2-texte p:not(.membre-titre):not(.membre-courriel) { font-size: 1rem; }
}

/* WEB.12 — Bandeau des logiciels (Accueil, Services ; gabarit : build.mjs, LOGICIELS). Deux fois la même liste dans la
   piste, qui glisse de gauche à droite d'une demi-largeur puis recommence : la boucle ne se voit pas. Chaque liste fait au
   moins la largeur de l'écran, pour qu'il n'y ait jamais de trou. Pause au survol ; immobile, en une seule liste qui passe
   à la ligne, si prefers-reduced-motion. Pas de bouton d'arrêt : choix de Loup (révision de WEB.12). */
.logiciels { padding: 44px 0 48px; background: var(--fond-doux); border-block: 1px solid var(--bordure); overflow: hidden; }
.logiciels-tete { margin-bottom: 22px; }
.logiciels-tete h2 { margin: 0; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.logiciels-defile { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logiciels-piste { display: flex; width: max-content; animation: logiciels-glisse 42s linear infinite; }
.logiciels:hover .logiciels-piste { animation-play-state: paused; }
.logiciels-liste { flex: none; display: flex; align-items: center; justify-content: space-around; gap: 64px; min-width: 100vw; margin: 0; padding: 6px 32px; list-style: none; }
.logiciels-liste li { display: flex; align-items: center; gap: 10px; flex: none; }
.logiciels-liste img { max-width: none; }
.logiciels-liste span { font-size: 1.15rem; font-weight: 600; color: #2b3540; white-space: nowrap; }
@keyframes logiciels-glisse { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 640px) {
  .logiciels { padding: 32px 0 36px; }
  .logiciels-liste { gap: 44px; padding-inline: 22px; }
  .logiciels-piste { animation-duration: 32s; }
}
@media (prefers-reduced-motion: reduce) {
  .logiciels-piste { width: auto; animation: none; }
  .logiciels-defile { -webkit-mask-image: none; mask-image: none; }
  .logiciels-liste { min-width: 0; flex: 1; flex-wrap: wrap; justify-content: center; gap: 28px 48px; }
  .logiciels-liste[aria-hidden="true"] { display: none; }
}

/* WEB.12 — QuickBooks ProAdvisor : le badge du pied de page et la mention d'À propos (profil chez Intuit). */
.badge-proadvisor { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 16px 10px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.06); line-height: 1.3; font-size: .85rem; color: #b9c6db; }
.pied a.badge-proadvisor { color: #b9c6db; }
.pied a.badge-proadvisor:hover { text-decoration: none; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); }
.badge-proadvisor strong { display: block; color: #fff; font-size: .95rem; }
.pied a.badge-proadvisor:hover strong { text-decoration: underline; }
.lettre-appel > p { margin: 0; }
.lettre-proadvisor { display: flex; align-items: center; gap: 12px; margin-top: 22px !important; font-size: .95rem; line-height: 1.4; color: var(--texte-doux); }
.lettre-proadvisor img { flex: none; }
.lettre-proadvisor a { color: var(--bleu); font-weight: 600; }

/* WEB.12 — Notre région : Gatineau et Sherbrooke, petites épingles posées selon la projection de la carte (style="left/top"
   dans a-propos.html) ; la pointe touche la ville. Le nom à droite de l'épingle, ou à gauche (.region-ville-gauche). */
.region-ville { position: absolute; width: 26px; height: 26px; translate: -50% -87.5%; color: var(--bleu); filter: drop-shadow(0 3px 4px rgba(16, 36, 72, .3)); }
.region-ville .icone { display: block; width: 100%; height: 100%; fill: var(--bleu); stroke: #fff; stroke-width: 1.6; }
.region-ville em { position: absolute; top: 50%; left: calc(100% + 2px); translate: 0 -50%; padding: 2px 9px; border-radius: 99px; background: #fff; font-style: normal; font-size: .74rem; font-weight: 600; line-height: 1.5; color: var(--marine); white-space: nowrap; box-shadow: 0 4px 12px rgba(16, 36, 72, .14); }
.region-ville-gauche em { left: auto; right: calc(100% + 2px); }
.region-adresse-role { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bordure); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); }