/* diakra.imertiv.com — la feuille du site de Diakra.   [imertiv-diakra-2026-10-17]
 * La mise en page d'un service en ligne (décision du 17/10 : « comme LegalPlace ») : du blanc et des cartes nettes. Les
 * couleurs, celles de la première tenue, reprises le 17/10 au soir à la demande de l'utilisateur : le bleu nuit, le blanc,
 * un filet doré ; le monogramme « DD ». Pas de dégradé, pas d'effet. Les polices : Myriad Pro, sinon Arial (consigne du
 * 01/10, comme imertiv.com) ; aucune police n'est chargée. Une seule tenue, claire : chaque couleur est posée explicitement.
 * (Les noms --bleu… restent : c'est le bleu nuit.) */

:root{
  --bleu:#14233C;--bleu-f:#0B1628;--bleu-pale:#EEF1F6;--bleu-ligne:#C3CBD8;
  --or:#B8955A;--or-texte:#7F6131;--or-pale:#F7F1E6;
  --encre:#14233C;--texte:#2A3446;--gris:#5E6878;--ligne:#DCE1E8;--pale:#F4F6F9;--blanc:#FFFFFF;
  --police:'Myriad Pro',Myriad,Arial,'Helvetica Neue',Helvetica,sans-serif;
  --r:16px;--r-s:10px;--ombre:0 1px 2px rgba(16,27,59,.05),0 10px 30px -16px rgba(16,27,59,.22);
  --large:1200px;--gouttiere:clamp(16px,4vw,32px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--blanc);scroll-padding-top:84px}
body{margin:0;background:var(--blanc);color:var(--texte);font:17px/1.6 var(--police);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--bleu);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--or-texte)}
a[href^="tel:"]{white-space:nowrap}
:focus-visible{outline:3px solid rgba(184,149,90,.6);outline-offset:3px;border-radius:6px}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--police);font-weight:700;color:var(--encre);margin:0;text-wrap:balance}
h1{font-size:clamp(36px,5.2vw,60px);line-height:1.06;letter-spacing:-.025em}
h2{font-size:clamp(28px,3.3vw,40px);line-height:1.12;letter-spacing:-.02em;margin-bottom:14px}
h3{font-size:19px;line-height:1.3;margin-bottom:8px}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

.passer{position:absolute;left:12px;top:-60px;z-index:100;background:var(--encre);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.passer:focus{top:12px;color:#fff}
.conteneur{width:100%;max-width:calc(var(--large) + 2 * var(--gouttiere));margin:0 auto;padding-inline:var(--gouttiere)}
.etroit{max-width:calc(840px + 2 * var(--gouttiere))}
.surtitre{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:600 13px/1.3 var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--or-texte)}
.surtitre::before{content:"";width:28px;height:2px;background:var(--or);flex:none}
.chapeau{font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--texte);max-width:64ch}
.note{margin:24px 0 0;color:var(--gris)}
.petit{font-size:14px;color:var(--gris)}

/* L'en-tête. */
.entete{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.entete.defile{border-bottom-color:var(--ligne)}
.entete .conteneur{display:flex;align-items:center;gap:18px;height:72px}
.marque{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--encre);margin-right:auto;min-width:0}
.monogramme{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:8px;background:var(--encre);color:#fff;font:700 15px/1 var(--police);letter-spacing:.06em;box-shadow:inset 0 -3px 0 var(--or)}
.marque-texte{display:flex;flex-direction:column;gap:2px;min-width:0}
.marque-nom{font:700 21px/1 var(--police);letter-spacing:-.01em;color:var(--encre)}
.marque-sous{font:500 12px/1.2 var(--police);color:var(--gris);white-space:nowrap}
.nav{display:flex;align-items:center;gap:2px}
.nav a{padding:9px 12px;border-radius:8px;color:var(--texte);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap}
.nav a:hover{background:var(--pale);color:var(--encre)}
.nav a[aria-current="page"]{color:var(--encre);box-shadow:inset 0 -2px 0 var(--or);border-radius:0}
.entete-tel{display:inline-flex;align-items:center;gap:7px;color:var(--encre);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.entete-tel .ic{width:18px;height:18px;color:var(--or-texte)}
.menu-bouton{display:none}

/* Les boutons. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 22px;border-radius:var(--r-s);font:700 16px/1.2 var(--police);text-decoration:none;border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s;cursor:pointer;white-space:nowrap}
.btn .ic{width:18px;height:18px}
.btn-plein{background:var(--bleu);color:#fff}
.btn-plein:hover{background:var(--bleu-f);color:#fff}
.btn-contour{border-color:var(--ligne);color:var(--encre);background:var(--blanc)}
.btn-contour:hover{border-color:var(--bleu);color:var(--bleu)}
.btn-lien{min-height:0;padding:0;margin-top:auto;color:var(--bleu);background:none;border:0;font-size:15px;justify-content:flex-start}
.btn-lien:hover{color:var(--bleu-f)}
.btn-entete{min-height:42px;padding:9px 16px;font-size:15px}
.boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* La confiance et les listes à coches. */
.confiance,.coches{list-style:none;margin:0;padding:0}
.confiance{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:15px;font-weight:600;color:var(--encre)}
.confiance li,.coches li{display:flex;align-items:flex-start;gap:9px}
.confiance .ic,.coches .ic{width:18px;height:18px;margin-top:3px;color:var(--or);stroke-width:2.2}
.coches{display:grid;gap:12px;margin:18px 0 0}

/* La tête de page. */
.tete{background:var(--blanc);padding:clamp(40px,6vw,84px) 0 clamp(48px,6vw,84px);border-bottom:1px solid var(--ligne)}
.tete-courte{padding:clamp(36px,5vw,60px) 0}
.tete h1{margin-bottom:20px;max-width:20ch}
.tete-grille{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.parcours-carte,.activite-carte{background:var(--pale);border:1px solid var(--ligne);border-radius:var(--r);padding:28px}
.parcours-carte-titre{margin:0 0 14px;font:700 13px/1.3 var(--police);letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.activite-carte .parcours-carte-titre{margin-top:22px}
.activite-carte .coches{margin-top:0;font-size:16px}
.parcours-carte ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.parcours-carte li{display:flex;gap:14px;align-items:center;background:var(--blanc);border:1px solid var(--ligne);border-radius:12px;padding:12px 14px;font-size:15px;color:var(--gris)}
.parcours-carte li>span{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--bleu-pale);color:var(--bleu);font-weight:700}
.parcours-carte b{display:block;color:var(--encre);font-size:16px}
.reperes{display:flex;flex-wrap:wrap;gap:12px 36px;margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--ligne)}
.reperes dt{font:600 12px/1.3 var(--police);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.reperes dd{margin:4px 0 0;font-weight:700;color:var(--encre)}

/* Le fil d'Ariane. */
.fil{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 22px;padding:0;font-size:14px;color:var(--gris)}
.fil li+li::before{content:"/";margin-right:6px;color:var(--ligne)}
.fil a{color:var(--gris)}

/* Les bandes. */
.bande{padding:clamp(56px,7vw,92px) 0}
.bande-pale{background:var(--pale)}

/* Les cartes. */
.grille-cartes{display:grid;gap:18px;margin-top:34px}
.grille-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.carte{display:flex;flex-direction:column;gap:6px;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:24px;box-shadow:var(--ombre)}
.carte p{margin:0 0 14px;font-size:16px}
.carte-plate{box-shadow:none}
.carte-plate p{margin:0}
.carte-lien{text-decoration:none;color:var(--texte);transition:border-color .15s,transform .15s}
.carte-lien:hover{border-color:var(--bleu-ligne);transform:translateY(-2px);color:var(--texte)}
.carte-ic{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:12px;background:var(--or-pale);color:var(--or-texte);margin-bottom:10px}
.carte-ic .ic{width:24px;height:24px}
.carte-ic-grand{width:54px;height:54px}
.carte-suite{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-weight:700;font-size:15px;color:var(--bleu)}
.carte-suite .ic{width:16px;height:16px}
.carte-encart{align-self:start}

/* Deux colonnes. */
.deux-colonnes{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}

/* Comment ça marche. */
.etapes{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.etapes li{position:relative;padding:24px;border-radius:var(--r);background:var(--blanc);border:1px solid var(--ligne)}
.etape-num{display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;border-radius:50%;background:var(--bleu);color:#fff;font-weight:700}
.etapes p{margin:0;font-size:16px}

/* Qui fait quoi. */
.qui{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}
.qui-colonne{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:28px}
.qui-expert{border-color:var(--ligne);border-top:3px solid var(--or)}
.qui-sous{margin:0;color:var(--gris);font-size:15px}

/* La vérité sur le lieu (pages des villes). */
.verite h2{font-size:clamp(24px,2.6vw,30px)}
.verite p{font-size:18px}
.verite p:last-child{margin-bottom:0}

/* Les villes et les autres activités. */
.villes{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.villes a{display:inline-flex;align-items:center;min-height:42px;padding:9px 16px;border:1px solid var(--ligne);border-radius:999px;background:var(--blanc);text-decoration:none;font-weight:600;color:var(--encre)}
.villes a:hover{border-color:var(--bleu);color:var(--bleu)}

/* Les questions. */
.questions{margin-top:26px;border-top:1px solid var(--ligne)}
.questions details{border-bottom:1px solid var(--ligne)}
.questions summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 2px;cursor:pointer;list-style:none;font-weight:700;font-size:18px;color:var(--encre)}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";flex:none;font-size:24px;line-height:1;font-weight:400;color:var(--or-texte)}
.questions details[open] summary::after{content:"−"}
.reponse{padding:0 2px 20px;max-width:72ch}
.reponse p:last-child{margin-bottom:0}

/* Le parcours « Commencer ». */
.parcours-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(32px,5vw,64px);align-items:start}
.relais{margin:0 0 18px;padding:14px 16px;border-radius:12px;background:var(--blanc);border:1px solid var(--ligne);font-size:15px;color:var(--gris)}
.coordonnees{margin:0}
.coordonnees dt{font:600 12px/1.3 var(--police);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.coordonnees dd{margin:4px 0 16px;font-size:18px;font-weight:700}
.parcours{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:clamp(20px,3vw,32px);box-shadow:var(--ombre)}
.parcours fieldset{margin:0 0 22px;padding:0;border:0;min-width:0}
.parcours legend{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0;font-weight:700;font-size:17px;color:var(--encre)}
.parcours{counter-reset:question}
.parcours-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bleu-pale);color:var(--bleu);font-size:14px}
/* Les questions se numérotent seules : la forme, cachée hors création, ne compte pas. */
.parcours fieldset:not([hidden]) .parcours-num::before{counter-increment:question;content:counter(question)}
.choix-grille{display:flex;flex-wrap:wrap;gap:8px}
.choix{position:relative;cursor:pointer}
.choix input{position:absolute;opacity:0;width:1px;height:1px}
.choix span{display:inline-flex;align-items:center;min-height:42px;padding:9px 15px;border:1.5px solid var(--ligne);border-radius:10px;background:var(--blanc);font-size:15px;font-weight:600;color:var(--texte);transition:border-color .15s,background .15s}
.choix:hover span{border-color:var(--bleu-ligne)}
.choix input:checked+span{border-color:var(--bleu);background:var(--bleu-pale);color:var(--bleu-f)}
.choix input:focus-visible+span{outline:3px solid rgba(184,149,90,.6);outline-offset:2px}
.parcours-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin:0 0 20px}
.parcours-champ label{display:block;margin-bottom:6px;font-weight:700;font-size:15px;color:var(--encre)}
.parcours-champ label span,.parcours-sous span{font-weight:400;color:var(--gris)}
.parcours-champ input,.parcours-champ textarea{display:block;width:100%;min-height:46px;padding:10px 14px;border:1.5px solid var(--ligne);border-radius:10px;font:16px var(--police);color:var(--encre);background:var(--blanc)}
.parcours-champ textarea{min-height:88px;resize:vertical}
.parcours-champ input:focus,.parcours-champ textarea:focus{border-color:var(--bleu);outline:none}
.parcours-sous{margin:0 0 10px;font-weight:700;font-size:15px;color:var(--encre)}
.parcours-message{margin:18px 0 0}
/* Le piège à robots : hors de l'écran, hors du parcours au clavier. */
.parcours-piege{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.parcours-fin .petit{margin:12px 0 0}
.parcours-retour{margin:12px 0 0;padding:12px 14px;border-radius:10px;background:var(--bleu-pale);color:var(--bleu-f);font-size:15px}

/* Le pied. */
.pied{background:var(--encre);color:#B8C0D4;font-size:15px;padding:56px 0 28px}
.pied a{color:#E4E8F2}
.pied a:hover{color:#fff}
.pied-haut{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr);gap:36px}
.pied-nom{margin-bottom:10px;font-weight:700;font-size:22px;color:#fff}
.pied h2{margin:0 0 14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-weight:700}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin:0 0 8px}
.pied-villes{columns:2;column-gap:20px}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:14px}
.pied-bas p{margin:0;max-width:80ch}

/* Les mentions légales. */
.texte-legal{max-width:840px;padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,92px)}
.texte-legal h2{font-size:24px;margin:36px 0 14px}
.texte-legal h2:first-child{margin-top:0}
.texte-legal dl{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:8px 24px;margin:0 0 18px}
.texte-legal dt{color:var(--gris);font-size:15px}
.texte-legal dd{margin:0}

/* Tablette. */
@media (max-width:1180px){
  .entete-tel span{display:none}
  .grille-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pied-haut{grid-template-columns:1fr 1fr}
}
/* Téléphone : le menu se replie. */
@media (max-width:920px){
  .entete .conteneur{height:64px;gap:10px}
  .menu-bouton{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 12px;border:1px solid var(--ligne);border-radius:10px;background:var(--blanc);color:var(--encre);font:700 15px/1 var(--police);cursor:pointer}
  .barres,.barres::before,.barres::after{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;position:relative}
  .barres::before,.barres::after{content:"";position:absolute;left:0}
  .barres::before{top:-5px}.barres::after{top:5px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gouttiere) 18px;background:var(--blanc);border-bottom:1px solid var(--ligne);box-shadow:0 18px 30px -20px rgba(16,27,59,.35)}
  .entete.ouvert .nav{display:flex}
  .nav a{padding:14px 4px;border-radius:0;border-bottom:1px solid var(--ligne);font-size:17px}
  .tete-grille,.deux-colonnes,.parcours-grille,.qui,.grille-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  body{font-size:16px}
  .marque-sous{display:none}
  .entete-tel{display:none}
  .btn-entete .ic{display:none}
  .grille-4,.etapes{grid-template-columns:minmax(0,1fr)}
  .boutons .btn{width:100%;white-space:normal}
  .parcours-champs{grid-template-columns:minmax(0,1fr)}
  .texte-legal dl{grid-template-columns:1fr;gap:2px}
  .texte-legal dd{margin-bottom:10px}
  .pied-haut{grid-template-columns:minmax(0,1fr)}
  h2{overflow-wrap:break-word;hyphens:auto}
}
@media (max-width:360px){
  .marque-nom{font-size:19px}
  .btn-entete{padding:9px 12px}
}