/* ==========================================================
   KOKO FUZE · Fondation SAUVEGARDE · animation en boucle (js/fondations.js)
   Tout est scopé sous #fondations#fondations : la spécificité (2,0,0) passe devant
   les remises à zéro de l'overlay (#overlayRoot.ov-page .overlay-article p, 1,2,1)
   et devant #futur-site .pl (1,1,0), pour un rendu identique en page seule et en injection.
   Thèmes par data-fond : nuit (défaut), encre, acier, plan (clair, celui de futur-site).
   Polices : fonts.css.
   ========================================================== */
#fondations#fondations{
  --kfs-bg:#0A0A0D;            /* Nuit */
  --kfs-line:#E9E6DF;          /* blanc cassé, traits du plan */
  --kfs-mute:#8E929B;          /* mentions techniques */
  --kfs-cyan:#31c7d2;          /* aplats actifs */
  --kfs-trait:var(--kfs-cyan); /* traits actifs : aiguille, coche, filet, numéros */
  --kfs-hatch:.08;             /* hachures des couches */
  --kfs-hl:.07;                /* aplat de la couche mise en avant */
  --kfs-trame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 .5H.5V24' fill='none' stroke='%23E9E6DF' stroke-opacity='.05'/%3E%3C/svg%3E");
  --kfs-title:"Chakra Petch",system-ui,sans-serif;
  --kfs-text:"Barlow",system-ui,sans-serif;
  background-color:var(--kfs-bg);
  background-image:var(--kfs-trame);
  color:var(--kfs-line);
}
/* Filets et cotes de la planche (règle, coupe, cartouche) sur fond sombre */
#fondations#fondations:not([data-fond="plan"]){
  --pl-encre:var(--kfs-line);
  --pl-trait:rgba(233,230,223,.24);
  --pl-trait-fort:rgba(233,230,223,.45);
  --pl-cote:rgba(233,230,223,.72);
}
#fondations#fondations[data-fond="encre"]{--kfs-bg:#0F1115}   /* fond de PL.03 */
#fondations#fondations[data-fond="acier"]{--kfs-bg:#14171C}
/* Plan clair : les couleurs des planches de futur-site.css (valeurs de secours hors de la page).
   Le cyan ne reste qu'en aplat ; gris des mentions à 6,8:1 sur #F3F2EE. */
#fondations#fondations[data-fond="plan"]{
  --kfs-bg:var(--pl-lin,#F3F2EE);
  --kfs-line:var(--pl-encre,#0F1115);
  --kfs-mute:var(--pl-cote,rgba(15,17,21,.7));
  --kfs-trait:var(--kfs-line);
  --kfs-hatch:.14;
  --kfs-hl:.12;
  --kfs-trame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 .5H.5V24' fill='none' stroke='%230F1115' stroke-opacity='.06'/%3E%3C/svg%3E");
}
#fondations#fondations *{box-sizing:border-box;border-radius:0}

/* En-tête de planche, hors de .kfs-stage (la scène s'efface à chaque boucle) */
#fondations#fondations .kicker{color:var(--kfs-mute)}
#fondations#fondations .kfs-h2{margin:10px 0 0;font:700 clamp(32px,4vw,56px)/1.04 var(--kfs-title);letter-spacing:normal;text-transform:none;color:var(--kfs-line)}

/* Scène calée à gauche sur la gouttière de la planche, comme le kicker et le h2 */
#fondations#fondations .kfs-stage{margin:clamp(40px,5vw,64px) 0 0;overflow-x:clip}
#fondations#fondations .kfs-row{display:grid;grid-template-columns:minmax(0,1fr)}
#fondations#fondations .kfs-draw{position:relative}
#fondations#fondations .kfs-draw svg{display:block;width:100%;height:auto;overflow:visible}

#fondations#fondations .kfs-tag{position:absolute;transform:translate(-50%,-50%);margin:0;font:500 12px/1 var(--kfs-text);letter-spacing:.08em;text-transform:uppercase;color:var(--kfs-mute);background:var(--kfs-bg);padding:3px 5px;white-space:nowrap}
/* Positions des étiquettes, en % du dessin */
#fondations#fondations .kfs-at-largeur{left:52.5%;top:18%}
#fondations#fondations .kfs-at-hauteur{left:86.7%;top:63%}
#fondations#fondations .kfs-at-niveau{left:18%;top:91%}
#fondations#fondations .kfs-at-num{left:6.5%;top:7%}
#fondations#fondations .kfs-at-hostinger{left:50%;top:80.5%}
#fondations#fondations .kfs-at-github{left:20.83%;top:6.5%}
#fondations#fondations .kfs-at-drive{left:79.17%;top:6.5%}
#fondations#fondations .kfs-at-atelier{left:33%;top:8.6%}
#fondations#fondations .kfs-at-ugreen{left:50%;top:88.6%}

#fondations#fondations .kfs-txt{padding:18px 0 32px}
#fondations#fondations .kfs-num{margin:0;padding:0;max-width:none;font:700 12px/1 var(--kfs-title);letter-spacing:.16em;text-transform:uppercase;color:var(--kfs-mute)}
#fondations#fondations .kfs-bar{display:block;width:40px;height:3px;margin:10px 0 12px;background:var(--kfs-trait);transform-origin:0 50%}
#fondations#fondations .kfs-name{margin:0 0 6px;padding:0;font:700 clamp(22px,2.2vw,28px)/1.1 var(--kfs-title);letter-spacing:normal;text-transform:none;color:var(--kfs-line)}
#fondations#fondations .kfs-phrase{margin:0 0 10px;padding:0;max-width:40ch;font:400 clamp(16px,1.3vw,17px)/1.45 var(--kfs-text);letter-spacing:normal;color:var(--kfs-line)}
#fondations#fondations .kfs-tech{margin:0;padding:0;max-width:none;font:500 12px/1.4 var(--kfs-text);letter-spacing:.1em;text-transform:uppercase;color:var(--kfs-mute)}
#fondations#fondations .kfs-final{margin:0;padding:0;max-width:17ch;font:700 clamp(24px,2.8vw,34px)/1.15 var(--kfs-title);letter-spacing:normal;color:var(--kfs-line)}

#fondations#fondations .kfs-cote{letter-spacing:.04em;text-transform:none;padding:1px 4px}
#fondations#fondations .kfs-mnum{display:none;font-family:var(--kfs-title);font-weight:700;color:var(--kfs-trait);letter-spacing:.1em}
#fondations#fondations .kfs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Traits SVG */
#fondations#fondations .ln{fill:none;stroke:var(--kfs-line);stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter}
#fondations#fondations .sol{fill:var(--kfs-bg)}
#fondations#fondations .thin{stroke-width:1;stroke-opacity:.5}
#fondations#fondations .k{stroke-width:2.25}              /* contours */
#fondations#fondations .f{stroke-width:1}                 /* menuiseries, lames */
#fondations#fondations .nss{vector-effect:non-scaling-stroke}
#fondations#fondations .gr{stroke-width:2.5}
#fondations#fondations .dash{stroke-dasharray:6 5}
#fondations#fondations .ax{stroke:var(--kfs-line);stroke-width:1;stroke-opacity:.2;stroke-dasharray:18 4 2 4}
#fondations#fondations .cy{fill:var(--kfs-cyan)}
#fondations#fondations .hl{fill-opacity:var(--kfs-hl)}
#fondations#fondations .cyl{fill:none;stroke:var(--kfs-trait);stroke-width:3;stroke-linecap:butt}
#fondations#fondations .nt{fill:none;stroke:var(--kfs-bg);stroke-width:1.5}
#fondations#fondations .fl{fill:var(--kfs-line)}
#fondations#fondations .hp{stroke:var(--kfs-line);stroke-width:1}
#fondations#fondations .hatch{opacity:var(--kfs-hatch)}
#fondations#fondations .crk{stroke-width:2.25}
/* Éléments seulement visibles pendant l'animation (état final = invisibles) */
#fondations#fondations .ghost{opacity:0}

/* Grand écran : coupe à gauche, textes à droite. La hauteur de chaque ligne
   est dictée par le dessin seul, pour que les couches restent jointives. */
@media (min-width:1000px){
  #fondations#fondations .kfs-row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,4vw,64px);align-items:center}
  #fondations#fondations .kfs-txt{height:0;padding:0;display:flex;flex-direction:column;justify-content:center}
}
/* Téléphone / tablette : la coupe reste d'un seul tenant (traits continus),
   les textes suivent en légende numérotée, la phrase finale tout en bas.
   nth-of-type compte les <div> de .kfs-stage : n'y insérer aucun autre <div>. */
@media (max-width:999px){
  #fondations#fondations .kfs-stage{max-width:640px;display:flex;flex-direction:column}
  #fondations#fondations .kfs-row{display:contents}
  #fondations#fondations .kfs-row:nth-of-type(1) .kfs-draw{order:1}
  #fondations#fondations .kfs-row:nth-of-type(2) .kfs-draw{order:2}
  #fondations#fondations .kfs-row:nth-of-type(3) .kfs-draw{order:3}
  #fondations#fondations .kfs-row:nth-of-type(4) .kfs-draw{order:4}
  #fondations#fondations .kfs-row:nth-of-type(2) .kfs-txt{order:5;padding-top:36px}
  #fondations#fondations .kfs-row:nth-of-type(3) .kfs-txt{order:6}
  #fondations#fondations .kfs-row:nth-of-type(4) .kfs-txt{order:7}
  #fondations#fondations .kfs-row:nth-of-type(1) .kfs-txt{order:8;padding-bottom:0}
  #fondations#fondations .kfs-txt{padding:0 0 28px}
  #fondations#fondations .kfs-mnum{display:block}
  #fondations#fondations .kfs-final{max-width:none}
  /* Paragraphes sur toute la colonne, comme ceux des planches voisines (le 40ch ne vaut qu'en deux colonnes) */
  #fondations#fondations .kfs-phrase{max-width:none}
}

/* ==========================================================
   KOKO FUZE · Titres des deux blocs de la planche (h3)
   ========================================================== */
#fondations#fondations .fon-titre{margin:clamp(40px,5vw,64px) 0 0;padding:14px 0 0;max-width:none;border-top:1.5px solid var(--kfs-line);font:700 clamp(26px,2.8vw,38px)/1.1 var(--kfs-title);letter-spacing:normal;text-transform:none;color:var(--kfs-line)}
#fondations#fondations .fon-titre + .kfs-stage{margin-top:clamp(24px,3vw,36px)}
#fondations#fondations .fon-titre--suite{margin-top:clamp(72px,8vw,120px)}

/* ==========================================================
   KOKO FUZE · Fondation RGPD · plan de masse animé en boucle (js/fondations.js, 2e module)
   Même règle que la sauvegarde : tout sous #fondations#fondations, préfixe kfr-.
   Le bloc .kfr est posé dans la planche : il en reprend le fond et la trame.
   Thèmes par data-fond : nuit (défaut), encre, acier, plan (celui de futur-site).
   ========================================================== */
#fondations#fondations .kfr{
  /* Sombre par défaut (nuit), comme la sauvegarde ; data-fond="plan" ci-dessous */
  --kfr-bg:#0A0A0D;
  --kfr-line:#E9E6DF;
  --kfr-mute:#8E929B;
  --kfr-cyan:#31c7d2;
  --kfr-oncyan:#0F1115;          /* texte posé sur un aplat cyan */
  --kfr-trait:var(--kfr-cyan);   /* filets actifs (sur fond sombre seulement) */
  --kfr-hatch:.08;
  --kfr-hl:.07;
  --kfr-title:"Chakra Petch",system-ui,sans-serif;
  --kfr-text:"Barlow",system-ui,sans-serif;
  color:var(--kfr-line);
  margin:clamp(24px,3vw,36px) 0 0;   /* fond et trame : ceux de la planche */
  overflow-x:clip;
}
#fondations#fondations .kfr[data-fond="encre"]{--kfr-bg:#0F1115}
#fondations#fondations .kfr[data-fond="acier"]{--kfr-bg:#14171C}
/* Plan clair : mêmes valeurs que la sauvegarde intégrée. Le cyan ne reste qu'en aplat ;
   gris des mentions rgba(15,17,21,.7) = 6,8:1 sur #F3F2EE. */
#fondations#fondations .kfr[data-fond="plan"]{
  --kfr-bg:var(--pl-lin,#F3F2EE);
  --kfr-line:var(--pl-encre,#0F1115);
  --kfr-mute:var(--pl-cote,rgba(15,17,21,.7));
  --kfr-trait:var(--kfr-line);
  --kfr-hatch:.14;
  --kfr-hl:.12;
}
#fondations#fondations .kfr *{box-sizing:border-box;border-radius:0}

#fondations#fondations .kfr-stage{margin:0}   /* calée à gauche, comme .kfs-stage */
#fondations#fondations .kfr-row{display:grid;grid-template-columns:minmax(0,1fr)}
#fondations#fondations .kfr-draw{position:relative}

/* En-tête du plan : étiquette à gauche, compteur à droite */
#fondations#fondations .kfr-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px 16px;margin:0 0 10px}
#fondations#fondations .kfr-lab{display:grid}
#fondations#fondations .kfr-lab span{grid-area:1/1;font:700 12px/1.2 var(--kfr-title);letter-spacing:.16em;text-transform:uppercase;color:var(--kfr-line)}
#fondations#fondations .kfr-cnts{text-align:right}
#fondations#fondations .kfr-cnt{padding:0;margin:0 0 4px;font:700 12px/1.25 var(--kfr-title);letter-spacing:.06em;text-transform:uppercase;color:var(--kfr-line)}
#fondations#fondations .kfr-cnt b{display:inline-block;min-width:1.2em;font-weight:700}
#fondations#fondations .kfr-cmp{display:block;margin:4px 0 0;font:500 12px/1.3 var(--kfr-text);letter-spacing:.04em;color:var(--kfr-mute)}
#fondations#fondations .kfr-anim .kfr-cmp{display:none}   /* comparaison seulement en reduced-motion / sans JS */

#fondations#fondations .kfr-plan{position:relative}
#fondations#fondations .kfr-plan svg{display:block;width:100%;height:auto;overflow:hidden}   /* le zoom reste dans le cadre du plan */
#fondations#fondations .kfr-layer{position:absolute;inset:0;pointer-events:none}

#fondations#fondations .kfr-tag{position:absolute;transform:translate(-50%,-50%);font:500 12px/1 var(--kfr-text);letter-spacing:.06em;color:var(--kfr-mute);background:var(--kfr-bg);padding:2px 4px;white-space:nowrap}
#fondations#fondations .kfr-box{position:absolute;width:max-content;transform:translate(-50%,-50%);max-width:84px;padding:4px 6px;font:500 12px/1.2 var(--kfr-text);text-align:center;color:var(--kfr-line);background:var(--kfr-bg);border:1.5px solid var(--kfr-line)}
#fondations#fondations .kfr-anx{position:absolute;transform:translate(-50%,-50%);font:500 12px/1 var(--kfr-text);color:var(--kfr-oncyan);white-space:nowrap}
#fondations#fondations .kfr-subs{position:relative;height:58px}
#fondations#fondations .kfr-subs-t{padding:0;position:absolute;left:50%;top:0;transform:translateX(-50%);margin:0;font:700 12px/1 var(--kfr-title);letter-spacing:.12em;text-transform:uppercase;color:var(--kfr-line);white-space:nowrap}
#fondations#fondations .kfr-serv{position:absolute;bottom:0;width:max-content;transform:translateX(-50%);max-width:128px;padding:3px 6px;font:500 12px/1.25 var(--kfr-text);text-align:center;color:var(--kfr-line);background:var(--kfr-bg);border:1.5px dashed var(--kfr-line)}
#fondations#fondations .kfr-src{padding:0;margin:10px 0 0;max-width:62ch;font:400 12px/1.4 var(--kfr-text);color:var(--kfr-mute)}
#fondations#fondations .kfr-room{position:absolute;display:flex;flex-direction:column;gap:3px;padding:5px 7px;font:400 12px/1.25 var(--kfr-text);color:var(--kfr-line);background:var(--kfr-bg)}
#fondations#fondations .kfr-rd{font-weight:500}
#fondations#fondations .kfr-rdu{font:700 12px/1.25 var(--kfr-title);letter-spacing:.06em}
/* Dernière ligne du registre : renvoi vers la politique de confidentialité */
#fondations#fondations .kfr-reg .kfr-rien{color:var(--kfr-mute)}
#fondations#fondations .kfr-reg a{color:var(--kfr-line);text-decoration:underline;text-underline-offset:2px;border:0}
#fondations#fondations .kfr-reg a:hover{color:var(--kfr-line);text-decoration-thickness:2px}

#fondations#fondations .kfr-banner{position:absolute;left:4%;right:4%;bottom:3%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 12px;font:500 12px/1.2 var(--kfr-text);color:var(--kfr-line);background:var(--kfr-bg);border:1.5px solid var(--kfr-line)}
#fondations#fondations .kfr-banner b{font:700 12px/1.2 var(--kfr-title);letter-spacing:.12em;text-transform:uppercase}
#fondations#fondations .kfr-banner span{display:flex;gap:8px}
#fondations#fondations .kfr-banner i{font-style:normal;padding:4px 10px;border:1.5px solid var(--kfr-line)}

/* Colonne de textes */
#fondations#fondations .kfr-txt{padding:28px 0 0}
#fondations#fondations .kfr-blk{margin:0 0 28px}
#fondations#fondations .kfr-num{padding:0;margin:0;font:700 12px/1 var(--kfr-title);letter-spacing:.16em;text-transform:uppercase;color:var(--kfr-mute)}
#fondations#fondations .kfr-bar{display:block;width:40px;height:3px;margin:10px 0 12px;background:var(--kfr-trait);transform-origin:0 50%}
#fondations#fondations .kfr-name{text-transform:none;letter-spacing:normal;padding:0;margin:0 0 6px;font:700 clamp(22px,2.2vw,28px)/1.1 var(--kfr-title);color:var(--kfr-line)}
#fondations#fondations .kfr-phrase{text-transform:none;letter-spacing:normal;padding:0;margin:0 0 10px;max-width:40ch;font:400 clamp(16px,1.3vw,17px)/1.45 var(--kfr-text);color:var(--kfr-line)}
#fondations#fondations .kfr-reg{margin:0;padding:0;list-style:none;font:400 13px/1.4 var(--kfr-text);color:var(--kfr-line)}
#fondations#fondations .kfr-reg li{padding:6px 0;border-top:1px solid var(--kfr-mute)}
#fondations#fondations .kfr-reg li:last-child{border-bottom:1px solid var(--kfr-mute)}
#fondations#fondations .kfr-final{text-transform:none;letter-spacing:normal;padding:0;margin:0;max-width:18ch;font:700 clamp(24px,2.8vw,34px)/1.15 var(--kfr-title);color:var(--kfr-line)}

#fondations#fondations .kfr-sr{max-width:none;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Traits SVG (mêmes classes et opacités que la sauvegarde) */
#fondations#fondations .kfr .ln{fill:none;stroke:var(--kfr-line);stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter}
#fondations#fondations .kfr .sol{fill:var(--kfr-bg)}
#fondations#fondations .kfr .thin{stroke-width:1;stroke-opacity:.5}
#fondations#fondations .kfr .k{stroke-width:2.25}
#fondations#fondations .kfr .k3{stroke-width:3.5}
#fondations#fondations .kfr .f{stroke-width:1}
#fondations#fondations .kfr .dash{stroke-dasharray:6 5}
#fondations#fondations .kfr .dot{stroke-dasharray:4 4}
#fondations#fondations .kfr .ax{stroke:var(--kfr-line);stroke-width:1;stroke-opacity:.2;stroke-dasharray:18 4 2 4}
#fondations#fondations .kfr .cy{fill:var(--kfr-cyan)}
#fondations#fondations .kfr .hl{fill-opacity:var(--kfr-hl)}
#fondations#fondations .kfr .fl{fill:var(--kfr-line)}
#fondations#fondations .kfr .hp{stroke:var(--kfr-line);stroke-width:1}
#fondations#fondations .kfr .hatch{opacity:var(--kfr-hatch)}
#fondations#fondations .kfr .plug{stroke-width:5}
#fondations#fondations .kfr .band{fill:none;stroke:var(--kfr-line);stroke-width:8;stroke-dasharray:2 3;stroke-linejoin:miter}
#fondations#fondations .kfr .wall{fill:var(--kfr-line);fill-rule:evenodd}
#fondations#fondations .kfr .pt{stroke-width:5}
#fondations#fondations .kfr .chm-o{fill:none;stroke:var(--kfr-line);stroke-width:13;stroke-linejoin:miter}
#fondations#fondations .kfr .chm-i{fill:none;stroke:var(--kfr-bg);stroke-width:10;stroke-linejoin:miter}
#fondations#fondations .kfr .vis{fill:var(--kfr-cyan);stroke:var(--kfr-line);stroke-width:1.5}
#fondations#fondations .kfr .kfr-route{fill:none;stroke:none}
#fondations#fondations .kfr .ghost{opacity:0}

/* Positions des étiquettes, en % du plan */
/* sous-traitant : au droit de la bande (x = 340 sur 680) */
#fondations#fondations .kfr-at-sv1{left:50%}
#fondations#fondations .kfr-at-n{left:5.88%;top:2.9%}
#fondations#fondations .kfr-at-zero{left:3.53%;top:90%}
#fondations#fondations .kfr-at-echelle{left:18.24%;top:90%}
#fondations#fondations .kfr-at-l1{left:13.53%;top:25.00%}
#fondations#fondations .kfr-at-l2{left:13.53%;top:47.92%}
#fondations#fondations .kfr-at-r1{left:86.47%;top:25.00%}
#fondations#fondations .kfr-at-r2{left:86.47%;top:47.92%}
#fondations#fondations .kfr-at-l3{left:13.53%;top:75.00%}
#fondations#fondations .kfr-at-a1{left:39.85%;top:23.33%}
#fondations#fondations .kfr-at-a2{left:40.15%;top:65.83%}
#fondations#fondations .kfr-at-a3{left:59.93%;top:23.33%}
#fondations#fondations .kfr-at-rm0{left:10.59%;top:16.67%;max-width:36.18%}
#fondations#fondations .kfr-at-rm1{left:50.29%;top:16.67%;max-width:39.12%}
#fondations#fondations .kfr-at-rm2{left:10.59%;top:54.58%;max-width:78.82%}

@media (min-width:1000px){
  #fondations#fondations .kfr-row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,4vw,64px);align-items:start}
  #fondations#fondations .kfr-txt{padding:30px 0 0}
}
@media (max-width:999px){
  #fondations#fondations .kfr-phrase{max-width:none}   /* toute la colonne, comme les planches voisines */
  #fondations#fondations .kfr-stage{max-width:640px}
  #fondations#fondations .kfr-final{max-width:none}
  #fondations#fondations .kfr-box{max-width:84px}
  #fondations#fondations .kfr-subs{height:72px}
  #fondations#fondations .kfr-serv{max-width:150px}
  #fondations#fondations .kfr-banner{flex-wrap:nowrap;padding:6px 8px}
  #fondations#fondations .kfr-banner i{padding:3px 8px}
  #fondations#fondations .kfr-cnts{text-align:left;width:100%}
}
/* Téléphone : les pièces sont trop petites pour la finalité (reprise mot pour mot de rgpd.html) ;
   elles gardent la donnée et la durée, la liste du registre dessous donne la finalité complète. */
@media (max-width:559px){
  #fondations#fondations .kfr-room [data-reg$=".raison"]{display:none}
}