/* ========================================================================= MOSAICA / STRATEGIE ET GOUVERNANCE DE LA DIVERSITE ------------------------------------------------------------------------- Feuille chargee UNIQUEMENT par expertises/strategie-gouvernance-diversite.html, APRES assets/expertises-identite.css dont elle consomme les jetons. PARTAGE DES ROLES expertises-identite.css surface, ligne de revelation, profondeur, annotations, typographie, actions, base des schemas, responsive commun, mouvement reduit commun. Prefixe exp-. ce fichier le mecanisme propre a Gouvernance et les compositions propres a ses sections. Prefixe sgd- exclusivement. Aucune regle .exp-* n'est redefinie : seules des regles contextuelles (`.sgd-x .exp-y`) existent. CE QUI APPARTIENT A CETTE PAGE LA BOUCLE FERMEE. Sept temps alignes sous un meme mandat, et un retour de la reevaluation vers les priorites. Rien ne se termine au dernier point : ce qui a ete mesure revient modifier ce qui avait ete decide. QUATRE LANGAGES, QUATRE EXPERTISES cult- une trace unique s'epaissit a force d'etre repetee icu- des trajectoires s'ecartent, puis se recalent partiellement ldr- un point rend d'autres points capables, dans un cadre commun air- une situation visible est remontee jusqu'a son origine sgd- une sequence revient sur elle-meme : la boucle de pilotage Aucun dessin n'est partage entre ces pages. POURQUOI CETTE PAGE EST PLUS ARCHITECTURALE Gouvernance montre des flux, des repartitions, des etats et des decisions. Elle est donc volontairement moins photographique que Leadership : deux photographies seulement, en respiration, jamais en visuel vedette. Les trois visuels signature sont en HTML/CSS. ANIMATION Les etats d'attente n'existent que sous `html.exp-anim`, arme par le filet du et confirme par assets/expertises-identite.js. Trois proprietes seulement : `opacity`, `transform` et `stroke-dashoffset`. Aucune animation ne modifie la mise en page, aucune ne boucle. ========================================================================= */ /* ============ 1. LA BOUCLE DE GOUVERNANCE (HEROS) ==================== */ .sgd-loop{margin:0} /* La phrase de cloture passait sous la ligne de flottaison : on ne pouvait pas lire l'animation ET ce qu'elle affirme dans le meme ecran. Elle et la mention de retour partagent desormais une rangee au lieu de s'empiler. */ .sgd-loop{display:grid;grid-template-columns:minmax(0,1fr) auto} .sgd-loop__stage,.sgd-loop__steps{grid-column:1 / -1} .sgd-loop__claim{grid-column:1} .sgd-loop__return{grid-column:2;align-self:end;margin:0.8rem 0 0 1.6rem;white-space:nowrap} @media(max-width:900px){ .sgd-loop{grid-template-columns:minmax(0,1fr)} .sgd-loop__claim,.sgd-loop__return{grid-column:1} .sgd-loop__return{margin-left:0;white-space:normal} } .sgd-loop__stage{position:relative} /* La bande est bornee en hauteur : son viewBox tres plat (1160 x 168) et cette limite garantissent que le heros entre dans le premier ecran, y compris sur un portable peu haut. */ .exp-page .sgd-loop__svg{ display:block;width:100%; height:clamp(98px,12.4vh,138px); } /* Le mandat : la seule ligne qui ne bouge jamais pendant le cycle. */ .sgd-loop-frame{fill:none;stroke:var(--exp-gold);stroke-width:1.4;opacity:.62} .sgd-loop-tether{fill:none;stroke:rgba(255,255,255,0.22);stroke-width:1} .sgd-loop-seg{fill:none;stroke:var(--exp-gold);stroke-width:1.6;opacity:.9} /* Le premier temps est OUVERT : l'intention existe avant d'etre portee. */ .sgd-loop-open{fill:none;stroke:var(--exp-gold);stroke-width:1.6} .sgd-loop-node{fill:var(--exp-gold)} /* Le retour : sans lui, il n'y a pas de gouvernance, seulement une suite de projets. Il est trace plus fin que la sequence, mais il est continu. */ .sgd-loop-back{fill:none;stroke:var(--exp-gold);stroke-width:1.2;opacity:.72} .sgd-loop-arrow{fill:none;stroke:var(--exp-gold);stroke-width:1.4;opacity:.9} /* Sequence : environ 3,6 s, jouee une seule fois, sans boucle. */ .exp-anim .sgd-loop.is-in .sgd-loop-frame{stroke-dasharray:var(--exp-len,1020);animation:expDraw 720ms ease 140ms both} .exp-anim .sgd-loop.is-in .sgd-loop-tether{animation:expFade 360ms ease 620ms both} .exp-anim .sgd-loop.is-in .sgd-loop-open{animation:expFade 320ms ease 420ms both} .exp-anim .sgd-loop.is-in .sgd-loop-seg{stroke-dasharray:var(--exp-len,155);animation:expDraw 320ms var(--exp-ease) both} .exp-anim .sgd-loop.is-in .sgd-loop-seg--1{animation-delay:560ms} .exp-anim .sgd-loop.is-in .sgd-loop-seg--2{animation-delay:760ms} .exp-anim .sgd-loop.is-in .sgd-loop-seg--3{animation-delay:960ms} .exp-anim .sgd-loop.is-in .sgd-loop-seg--4{animation-delay:1160ms} .exp-anim .sgd-loop.is-in .sgd-loop-seg--5{animation-delay:1360ms} .exp-anim .sgd-loop.is-in .sgd-loop-seg--6{animation-delay:1560ms} .exp-anim .sgd-loop.is-in .sgd-loop-node{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease both} .exp-anim .sgd-loop.is-in .sgd-loop-node--2{animation-delay:700ms} .exp-anim .sgd-loop.is-in .sgd-loop-node--3{animation-delay:900ms} .exp-anim .sgd-loop.is-in .sgd-loop-node--4{animation-delay:1100ms} .exp-anim .sgd-loop.is-in .sgd-loop-node--5{animation-delay:1300ms} .exp-anim .sgd-loop.is-in .sgd-loop-node--6{animation-delay:1500ms} .exp-anim .sgd-loop.is-in .sgd-loop-node--7{animation-delay:1700ms} /* Le retour se trace en dernier : c'est lui qui ferme la lecture. */ .exp-anim .sgd-loop.is-in .sgd-loop-back{stroke-dasharray:var(--exp-len,1010);animation:expDraw 900ms var(--exp-ease) 1900ms both} .exp-anim .sgd-loop.is-in .sgd-loop-arrow{animation:expFade 300ms ease 2800ms both} .exp-anim .sgd-loop.is-armed .sgd-loop__step{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--exp-ease)} .exp-anim .sgd-loop.is-in .sgd-loop__step{opacity:1;transform:none} .exp-anim .sgd-loop.is-in .sgd-loop__step--1{transition-delay:.42s} .exp-anim .sgd-loop.is-in .sgd-loop__step--2{transition-delay:.7s} .exp-anim .sgd-loop.is-in .sgd-loop__step--3{transition-delay:.9s} .exp-anim .sgd-loop.is-in .sgd-loop__step--4{transition-delay:1.1s} .exp-anim .sgd-loop.is-in .sgd-loop__step--5{transition-delay:1.3s} .exp-anim .sgd-loop.is-in .sgd-loop__step--6{transition-delay:1.5s} .exp-anim .sgd-loop.is-in .sgd-loop__step--7{transition-delay:1.7s} .exp-anim .sgd-loop.is-armed .sgd-loop__return{opacity:0;transition:opacity .6s ease 2.9s} .exp-anim .sgd-loop.is-in .sgd-loop__return{opacity:1} .exp-anim .sgd-loop.is-armed .sgd-loop__claim{opacity:0;transform:translateY(10px);transition:opacity .6s ease 3.1s,transform .6s var(--exp-ease) 3.1s} .exp-anim .sgd-loop.is-in .sgd-loop__claim{opacity:1;transform:none} /* Les sept temps sont du texte HTML : rien d'essentiel n'est enferme dans le schema. Ils s'alignent sur les sept stations du trace. */ .sgd-loop__steps{ list-style:none;margin:0.4rem 0 0;padding:0; display:grid;grid-template-columns:repeat(7,minmax(0,1fr)); gap:0.5rem; } .sgd-loop__step{ display:flex;flex-direction:column;align-items:center;gap:0.2rem; text-align:center;min-width:0; } .sgd-loop__n{ font-size:0.68rem;font-weight:700;letter-spacing:0.14em; color:var(--exp-gold); } .sgd-loop__label{ font-size:0.76rem;font-weight:600; letter-spacing:0.1em;text-transform:uppercase; color:var(--exp-on-dark);line-height:1.3; } .sgd-loop__return{ margin:0.5rem 0 0;text-align:right; font-size:0.78rem;letter-spacing:0.08em; color:var(--exp-gold); } .sgd-loop__claim{ margin:0.5rem 0 0;max-width:66ch; font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(0.95rem,0.89rem + 0.34vw,1.14rem); line-height:1.44;color:var(--exp-on-dark); } /* Le titre de cette page est plus court que celui de Leadership : il peut occuper une mesure un peu plus etroite sans casser en trop de lignes. */ .sgd-h1{ max-width:min(96%,26ch); /* Le titre pesait 191 px sur trois lignes et repoussait la legende de l'animation sous la ligne de flottaison. Un cran plus bas suffit : rien n'est retire, la page tient dans un ecran. */ font-size:clamp(1.85rem,0.98rem + 2.5vw,3.15rem); } /* La definition Mosaica, juste sous le titre. C'est elle qui fixe le territoire : management et decision, pas EDI generique. */ .sgd-def{ margin:1rem 0; max-width:56ch; font-family:'Ibarra Real Nova',serif;font-weight:600; font-size:clamp(1.1rem,1rem + 0.6vw,1.44rem); line-height:1.4;color:var(--exp-gold-ink); padding-left:clamp(0.9rem,2vw,1.3rem); border-left:2px solid var(--exp-gold); } /* ============ 2. DEUX ORGANISATIONS ================================= */ /* Aucune des deux n'est reelle et aucune n'est meilleure moralement : l'une possede un systeme, l'autre non. Le filet dore ne marque donc que la colonne qui porte une gouvernance. */ .sgd-compare{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.75rem,4vw,3.25rem); margin-top:clamp(2rem,5vh,3rem); align-items:start; } .sgd-org{min-width:0;padding-top:1rem;border-top:2px solid var(--exp-stroke-soft)} .sgd-org--b{border-top-color:var(--exp-gold)} .sgd-org__tag{ margin:0 0 0.7rem; font-size:0.72rem;font-weight:700; letter-spacing:0.18em;color:var(--exp-ink-dim); } .sgd-org--b .sgd-org__tag{color:var(--exp-gold-ink)} .sgd-org__title{ margin:0 0 1rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.2rem,1.02rem + 0.7vw,1.55rem); line-height:1.2;color:var(--exp-navy-deep); } .sgd-org__list{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:0.45rem} .sgd-org__list li{ position:relative;padding-left:1.15rem; font-size:1rem;line-height:1.55;color:var(--exp-ink); } .sgd-org__list li::before{ content:"";position:absolute;left:0;top:0.62em; width:7px;height:2px;background:var(--exp-stroke); } .sgd-org--b .sgd-org__list li::before{background:var(--exp-gold)} .sgd-org__say{ margin:0;padding-top:0.9rem; border-top:1px solid var(--exp-rule); font-size:0.95rem;line-height:1.62;color:var(--exp-ink-dim); } /* ============ 3. LES QUATRE NIVEAUX ET LE COMITE ==================== */ .sgd-levels{ list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.5rem); } .sgd-level{min-width:0;padding-top:1rem;border-top:2px solid var(--exp-gold)} .sgd-level__n{ display:block; font-size:0.72rem;font-weight:700;letter-spacing:0.16em; color:var(--exp-gold-ink);margin-bottom:0.5rem; } .sgd-level__who{ margin:0 0 0.5rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.08rem,1rem + 0.42vw,1.3rem); line-height:1.2;color:var(--exp-navy-deep); } .sgd-level__say{margin:0;font-size:0.93rem;line-height:1.6;color:var(--exp-ink-dim)} /* VISUEL B : le comite. Un anneau OUVERT, jamais un disque plein : il coordonne sans absorber. Le trait est interrompu en quatre endroits, la ou les quatre niveaux gardent leur responsabilite propre. */ .sgd-hub{ display:grid;grid-template-columns:auto minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:center; margin:clamp(2.5rem,6vh,3.75rem) 0 0; padding-top:clamp(1.75rem,4vh,2.5rem); border-top:1px solid var(--exp-rule); } .sgd-hub__viz{ position:relative;flex:none; width:clamp(150px,18vw,210px);height:clamp(150px,18vw,210px); display:grid;place-items:center; } .sgd-hub__ring{ position:absolute;inset:0;border-radius:50%; border:1.5px solid var(--exp-gold); /* Quatre interruptions : le comite ne referme jamais completement le perimetre du sujet. */ -webkit-mask-image:conic-gradient(#000 0 20deg,transparent 20deg 25deg,#000 25deg 110deg,transparent 110deg 115deg,#000 115deg 200deg,transparent 200deg 205deg,#000 205deg 290deg,transparent 290deg 295deg,#000 295deg 360deg); mask-image:conic-gradient(#000 0 20deg,transparent 20deg 25deg,#000 25deg 110deg,transparent 110deg 115deg,#000 115deg 200deg,transparent 200deg 205deg,#000 205deg 290deg,transparent 290deg 295deg,#000 295deg 360deg); } .sgd-hub__core{ position:relative;max-width:8.5ch;text-align:center; font-size:0.66rem;font-weight:700; letter-spacing:0.12em;line-height:1.35; color:var(--exp-gold-ink); } .sgd-hub__title{ margin:0 0 0.8rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.2rem,1.02rem + 0.7vw,1.5rem); line-height:1.22;color:var(--exp-navy-deep); } .sgd-hub__body .exp-eyebrow{margin-bottom:0.7rem} /* ============ 4. LA CHAINE DONNEE - DECISION ======================== */ /* Sept maillons. Le quatrieme, la decision, est le pivot : c'est le seul a porter un filet dore plein epaisseur. */ .sgd-chain{ list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; } .sgd-chain__link{ min-width:0; padding:1rem clamp(0.6rem,1.3vw,1.1rem) 0.4rem 0; border-top:1px solid var(--exp-rule-dark); } .sgd-chain__link + .sgd-chain__link{ padding-left:clamp(0.6rem,1.3vw,1.1rem); border-left:1px solid var(--exp-rule-dark); } .sgd-chain__link.is-pivot{border-top:2px solid var(--exp-gold)} .sgd-chain__n{ display:block; font-size:0.68rem;font-weight:700;letter-spacing:0.16em; color:var(--exp-gold);margin-bottom:0.45rem; } .sgd-chain__name{ margin:0 0 0.4rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(0.98rem,0.92rem + 0.3vw,1.14rem); line-height:1.2;color:#fff; } .sgd-chain__say{margin:0;font-size:0.85rem;line-height:1.5;color:var(--exp-on-dark-dim)} /* ============ 5. LE COCKPIT DE PILOTAGE ============================= */ /* VISUEL C : un tableau editorial, pas une interface SaaS. Aucun chiffre, uniquement des etats et la decision qu'ils appellent. */ .sgd-cockpit{margin-top:clamp(2rem,5vh,3rem)} .sgd-cockpit__note{ margin:0 0 1rem; font-size:0.82rem;line-height:1.55;color:var(--exp-ink-dim); max-width:74ch; } /* Le tableau defile dans son propre conteneur : la page ne defile jamais horizontalement. */ .sgd-cockpit__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .sgd-table{ width:100%;min-width:860px; border-collapse:collapse; background:#fff; } .sgd-table th, .sgd-table td{ text-align:left;vertical-align:top; padding:0.95rem 1.1rem; border-bottom:1px solid var(--exp-rule); } .sgd-table thead th{ font-size:0.7rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-gold-ink); border-bottom:2px solid var(--exp-gold); white-space:nowrap; } .sgd-table td{font-size:0.93rem;line-height:1.5;color:var(--exp-ink)} .sgd-table tbody tr:last-child td{border-bottom:0} .sgd-table td:first-child{font-weight:600;color:var(--exp-navy-deep)} /* Les etats sont des mots, jamais des pastilles de couleur seules : l'information ne depend pas de la perception des couleurs. */ .sgd-state{ display:inline-block;white-space:nowrap; padding:0.28rem 0.6rem; font-size:0.78rem;font-weight:600;letter-spacing:0.04em; border-left:3px solid var(--exp-steel); background:var(--exp-mineral);color:var(--exp-ink); } .sgd-state--analyse{border-left-color:var(--exp-steel-ink)} .sgd-state--suivi{border-left-color:var(--exp-navy)} .sgd-state--arbitrage{border-left-color:var(--exp-gold-ink);background:#F6EFE1} .sgd-state--stable{border-left-color:#3F6B57} /* ============ 6. DIAGNOSTIC ET GOUVERNANCE ========================== */ .sgd-split{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(2rem,5vw,4rem); align-items:start; } .sgd-two{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.25rem,3vh,1.75rem)} .sgd-two__col{padding-top:1rem;border-top:2px solid var(--exp-stroke-soft)} .sgd-two__col--gold{border-top-color:var(--exp-gold)} .sgd-two__tag{ margin:0 0 0.8rem; font-size:0.72rem;font-weight:700; letter-spacing:0.18em;color:var(--exp-ink-dim); } .sgd-two__col--gold .sgd-two__tag{color:var(--exp-gold-ink)} .sgd-two__q{ margin:0;padding:0.55rem 0; font-family:'Ibarra Real Nova',serif; font-size:clamp(1.02rem,0.96rem + 0.32vw,1.2rem); line-height:1.35;color:var(--exp-navy-deep); } .sgd-two__q + .sgd-two__q{border-top:1px solid var(--exp-rule)} /* Les deux photographies : respirations editoriales. Elles gardent leur ratio d'origine, ne sont jamais recadrees par `object-fit: cover` et ne depassent jamais une largeur qui en ferait le sujet de la page. */ .sgd-shot{margin:clamp(2.25rem,5.5vh,3.5rem) 0 0;max-width:820px} .sgd-shot--right{margin-left:auto} .sgd-shot img{ display:block;width:100%;height:auto; border-top:2px solid var(--exp-gold); } .sgd-shot figcaption{ margin-top:0.85rem; font-size:0.88rem;line-height:1.58; color:var(--exp-ink-dim);max-width:58ch; } /* ============ 7. L'INTEGRAMETRE COMME INSTRUMENT ==================== */ .sgd-instrument{ list-style:none;margin:clamp(2rem,5vh,2.75rem) 0 0;padding:0; } .sgd-instrument li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0.15rem clamp(0.9rem,2vw,1.4rem); padding-block:0.9rem; border-top:1px solid var(--exp-rule); font-size:0.97rem;line-height:1.58;color:var(--exp-ink-dim); } .sgd-instrument li:last-child{border-bottom:1px solid var(--exp-rule)} .sgd-instrument__n{ grid-row:1 / span 2; font-size:0.72rem;font-weight:700;letter-spacing:0.14em; color:var(--exp-gold-ink);padding-top:0.28rem; } .sgd-instrument b{ font-size:0.78rem;font-weight:700; letter-spacing:0.14em;text-transform:uppercase; color:var(--exp-navy-deep); } /* ============ 8. LES CINQ PERSPECTIVES ============================== */ /* Grille de douze colonnes. Deux cartes portent une photographie, trois portent un visuel CONCEPTUEL en HTML/CSS. Les formats different volontairement : ce n'est pas une grille de cartes clonees. rangee 1 lead 7 (photo) + concept 5 rangee 2 photo 5 + concept 4 + concept 3 */ .sgd-cards{ list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1.75rem,3.5vw,2.75rem); align-items:start; } .sgd-card{min-width:0} .sgd-card--lead{grid-column:span 7} .sgd-card--concept{grid-column:span 5} .sgd-card--photo{grid-column:span 5} .sgd-card--concept-b{grid-column:span 4} .sgd-card--concept-c{grid-column:span 3} .sgd-card__link{display:block;height:100%;text-decoration:none;color:inherit} .sgd-card__visual{ display:block;overflow:hidden; border-top:2px solid var(--exp-gold);background:var(--exp-deep); } .sgd-card__visual img{ display:block;width:100%;height:auto; transition:transform .5s var(--exp-ease); } .sgd-card__link:hover .sgd-card__visual img{transform:scale(1.03)} /* Les visuels conceptuels remplacent une photo : meme filet dore, meme fond profond, hauteur proche d'une image en 1,55:1. */ .sgd-card__visual--viz{ display:grid;place-items:center; aspect-ratio:1.55 / 1;padding:clamp(1rem,3vw,2rem); } .sgd-card__body{display:block;padding-top:1.05rem} .sgd-card__kind{ display:block;font-size:0.72rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-gold-ink);margin-bottom:0.5rem; } .sgd-card__title{ display:block; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.08rem,1rem + 0.4vw,1.26rem); line-height:1.28;color:var(--exp-navy-deep);margin-bottom:0.45rem; transition:color .22s ease; } .sgd-card__link:hover .sgd-card__title{color:var(--exp-gold-ink)} .sgd-card__say{display:block;font-size:0.94rem;line-height:1.6;color:var(--exp-ink-dim)} .sgd-card--lead .sgd-card__title{font-size:clamp(1.32rem,1.05rem + 0.95vw,1.7rem)} .sgd-card--concept .sgd-card__title{font-size:clamp(1.18rem,1.02rem + 0.6vw,1.44rem)} .sgd-card--concept-c .sgd-card__title{font-size:clamp(1.02rem,0.96rem + 0.3vw,1.14rem)} .sgd-card--concept-c .sgd-card__say{font-size:0.89rem} .sgd-cards__more{margin:clamp(2rem,5vh,2.75rem) 0 0} /* --- Les trois visuels conceptuels des cartes ------------------------- */ .sgd-viz{display:block;width:100%;max-width:340px} /* A. Une politique qui devient une chaine de responsabilites. */ .sgd-viz--policy{display:grid;gap:0.9rem;justify-items:center} .sgd-viz__doc{ display:grid;gap:5px;width:76px;padding:10px 9px; border:1px solid rgba(255,255,255,0.34); } .sgd-viz__doc i{display:block;height:2px;background:rgba(255,255,255,0.42)} .sgd-viz__doc i:last-child{width:60%} .sgd-viz__arrow{ display:block;width:1px;height:22px; background:var(--exp-gold);position:relative; } .sgd-viz__arrow::after{ content:"";position:absolute;left:-3px;bottom:0; width:7px;height:7px;border-right:1px solid var(--exp-gold); border-bottom:1px solid var(--exp-gold);transform:rotate(45deg); } .sgd-viz__chain{display:flex;align-items:center;gap:0} .sgd-viz__chain b{ display:block;width:13px;height:13px;background:var(--exp-gold); } .sgd-viz__chain b + b{margin-left:26px;position:relative} .sgd-viz__chain b + b::before{ content:"";position:absolute;left:-26px;top:50%; width:26px;height:1px;background:var(--exp-gold);opacity:.8; } /* B. Une responsabilite vide, puis un proprietaire designe. */ .sgd-viz--owner{display:grid;gap:1.5rem} .sgd-viz__row{display:flex;align-items:center;justify-content:center;gap:14px} .sgd-viz__row i{ display:block;width:13px;height:13px; background:rgba(255,255,255,0.3); } .sgd-viz__row i.is-void{ background:transparent; border:1px dashed rgba(255,255,255,0.45); } .sgd-viz__row i.is-owner{background:var(--exp-gold);box-shadow:0 0 0 4px rgba(199,166,106,0.22)} .sgd-viz__row.is-after i{background:rgba(255,255,255,0.22)} .sgd-viz__row.is-after i.is-owner{background:var(--exp-gold)} /* C. Le comite coordonne quatre fonctions sans les absorber. */ .sgd-viz--hub{position:relative;aspect-ratio:1;max-width:190px;margin-inline:auto} .sgd-viz__hub{ position:absolute;top:50%;left:50%; width:36px;height:36px;margin:-18px 0 0 -18px; border:1.5px solid var(--exp-gold);border-radius:50%; } .sgd-viz__sat{ position:absolute;width:11px;height:11px; background:rgba(255,255,255,0.62); } .sgd-viz__sat::before{ content:"";position:absolute;background:rgba(199,166,106,0.55); } .sgd-viz__sat.s1{top:0;left:50%;margin-left:-5.5px} .sgd-viz__sat.s1::before{left:5px;top:11px;width:1px;height:44px} .sgd-viz__sat.s2{bottom:0;left:50%;margin-left:-5.5px} .sgd-viz__sat.s2::before{left:5px;bottom:11px;width:1px;height:44px} .sgd-viz__sat.s3{left:0;top:50%;margin-top:-5.5px} .sgd-viz__sat.s3::before{top:5px;left:11px;height:1px;width:44px} .sgd-viz__sat.s4{right:0;top:50%;margin-top:-5.5px} .sgd-viz__sat.s4::before{top:5px;right:11px;height:1px;width:44px} /* ============ 9. TROIS PORTES ET CONCLUSION ========================= */ .sgd-doors{list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0} .sgd-door{ display:grid;grid-template-columns:auto minmax(0,1fr); gap:0.35rem clamp(1rem,2.5vw,2rem); align-items:baseline; padding-block:clamp(1.35rem,3.5vh,2.1rem); border-top:1px solid var(--exp-rule-dark); } .sgd-door:last-child{border-bottom:1px solid var(--exp-rule-dark)} .sgd-door__n{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.5rem,1.15rem + 1.2vw,2.15rem); line-height:1;color:var(--exp-gold); } .sgd-door__name{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.4rem,1.1rem + 1.2vw,1.95rem); line-height:1.14;color:#fff; } .sgd-door__say{ grid-column:2;margin:0.4rem 0 0; font-size:1rem;line-height:1.62;color:var(--exp-on-dark-dim);max-width:56ch; } .sgd-end{position:relative} .sgd-end__sign{ margin:clamp(2rem,5vh,3rem) 0 0;max-width:44ch; font-family:'Ibarra Real Nova',serif;font-weight:600; font-size:clamp(1.24rem,1.05rem + 0.95vw,1.85rem); line-height:1.32;color:#fff; } .sgd-end__links{ display:flex;flex-wrap:wrap;align-items:center; gap:0.9rem 1.9rem;margin:clamp(1.6rem,4vh,2.4rem) 0 0; } /* Utilitaire : legende de tableau reservee aux lecteurs d'ecran. */ .sr-only{ position:absolute;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ====================== 10. TABLETTE (<= 1080px) ==================== */ @media(max-width:1080px){ .sgd-compare{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .sgd-levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.35rem,3vw,2rem)} .sgd-hub{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vh,2.25rem);justify-items:start} /* La chaine passe en deux rangees plutot que de comprimer sept colonnes jusqu'a rendre les libelles illisibles. */ .sgd-chain{grid-template-columns:repeat(4,minmax(0,1fr))} .sgd-chain__link{padding-right:clamp(0.6rem,1.6vw,1rem)} .sgd-chain__link + .sgd-chain__link{border-left:0;padding-left:0} .sgd-chain__link:not(:nth-child(4n+1)){ padding-left:clamp(0.6rem,1.6vw,1rem); border-left:1px solid var(--exp-rule-dark); } .sgd-split{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .sgd-shot, .sgd-shot--right{max-width:760px;margin-left:0} .sgd-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .sgd-card, .sgd-card--lead, .sgd-card--concept, .sgd-card--photo, .sgd-card--concept-b, .sgd-card--concept-c{grid-column:auto} } /* ======================= 11. TELEPHONE (<= 900px) =================== */ @media(max-width:900px){ /* LA BOUCLE DEVIENT VERTICALE. Le trace large ne serait plus lisible : il cede la place a la meme lecture, portee par les sept libelles et par un filet vertical continu. La derniere ligne porte le retour, qui est le sens du schema. */ .sgd-loop__stage{display:none} .sgd-loop__steps{ display:block;margin-top:0; position:relative;padding-left:1.35rem; } /* Le filet vertical : le mandat, present a chaque etape. */ .sgd-loop__steps::before{ content:"";position:absolute;left:3px;top:0.4rem;bottom:0.4rem; width:1px;background:var(--exp-gold);opacity:.55; } .sgd-loop__step{ display:grid;grid-template-columns:auto minmax(0,1fr); align-items:baseline;gap:0.3rem 0.85rem; text-align:left;position:relative; padding-block:0.7rem; border-top:1px solid rgba(255,255,255,0.14); } .sgd-loop__step:first-child{border-top:0;padding-top:0} .sgd-loop__step::before{ content:"";position:absolute;left:-1.35rem;top:1.05rem; width:9px;height:9px;background:var(--exp-gold); } .sgd-loop__step--1::before{background:transparent;border:1px solid var(--exp-gold)} .sgd-loop__return{ text-align:left;margin-top:0.9rem;padding-left:1.35rem; position:relative; } .sgd-loop__return::before{ content:"";position:absolute;left:3px;top:-0.9rem; width:1px;height:0.9rem;background:var(--exp-gold);opacity:.55; } .sgd-h1{max-width:none} .sgd-def{max-width:none} .sgd-levels{grid-template-columns:minmax(0,1fr);gap:0} .sgd-level{padding-block:1.05rem 0.4rem} .sgd-level:first-child{padding-top:1rem} .sgd-chain{grid-template-columns:minmax(0,1fr)} .sgd-chain__link, .sgd-chain__link + .sgd-chain__link{ padding:0.95rem 0 0.55rem;border-left:0; } .sgd-hub__viz{width:150px;height:150px} .sgd-cards{grid-template-columns:minmax(0,1fr)} .sgd-card__visual--viz{aspect-ratio:1.7 / 1} .sgd-door{grid-template-columns:auto minmax(0,1fr)} .sgd-end__sign{max-width:none} .sgd-table{min-width:720px} /* Reprise de la hierarchie typographique face a mobile-premium.css. Meme regle que dans expertises-identite.css : trois classes pour depasser, jamais un !important arbitraire. */ .exp-page .exp-shell .sgd-level__say, .exp-page .exp-shell .sgd-chain__say, .exp-page .exp-shell .sgd-door__say, .exp-page .exp-shell .sgd-card__say, .exp-page .exp-shell .sgd-org__say, .exp-page .exp-shell .sgd-org__list li, .exp-page .exp-shell .sgd-instrument li{font-size:16px !important;line-height:1.6 !important} .exp-page .exp-shell .sgd-end__sign{font-size:20px !important;line-height:1.4 !important} .exp-page .exp-shell .sgd-loop__claim{font-size:clamp(1.02rem,4.2vw,1.24rem) !important;line-height:1.46 !important} .exp-page .exp-shell .sgd-loop__label{font-size:13.5px !important;letter-spacing:0.11em} .exp-page .exp-shell .sgd-loop__n, .exp-page .exp-shell .sgd-level__n, .exp-page .exp-shell .sgd-chain__n, .exp-page .exp-shell .sgd-instrument__n, .exp-page .exp-shell .sgd-card__kind, .exp-page .exp-shell .sgd-org__tag, .exp-page .exp-shell .sgd-two__tag{font-size:12.5px !important} .exp-page .exp-shell .sgd-instrument b{font-size:13px !important;letter-spacing:0.14em} .exp-page .exp-shell .sgd-level__who, .exp-page .exp-shell .sgd-chain__name, .exp-page .exp-shell .sgd-card__title, .exp-page .exp-shell .sgd-org__title, .exp-page .exp-shell .sgd-hub__title{font-size:19px !important;line-height:1.24 !important} .exp-page .exp-shell .sgd-card--lead .sgd-card__title{font-size:22px !important} .exp-page .exp-shell .sgd-door__name{font-size:22px !important;line-height:1.14 !important} .exp-page .exp-shell .sgd-door__n{font-size:1.4rem !important} .exp-page .exp-shell .sgd-def{font-size:18px !important;line-height:1.4 !important} .exp-page .exp-shell .sgd-two__q{font-size:17px !important;line-height:1.38 !important} .exp-page .exp-shell .sgd-table td{font-size:15px !important} .exp-page .exp-shell .sgd-cockpit__note, .exp-page .exp-shell .sgd-shot figcaption{font-size:14.5px !important;line-height:1.58 !important} } @media(max-width:420px){ .sgd-door{gap:0.3rem 0.85rem} .sgd-def{padding-left:0.9rem} } /* ============ 12. VERSION SANS MOUVEMENT (COMPLEMENT PAGE) ========== */ /* expertises-identite.css a deja coupe animations et transitions pour toute la famille. On remet ici a plat les seuls etats d'attente propres a cette page : rien ne doit rester replie, efface ou hors cadre. */ @media(prefers-reduced-motion:reduce){ .exp-page .sgd-loop-frame, .exp-page .sgd-loop-seg, .exp-page .sgd-loop-back{stroke-dasharray:none !important;stroke-dashoffset:0 !important} .exp-page .sgd-loop-tether, .exp-page .sgd-loop-open, .exp-page .sgd-loop-node, .exp-page .sgd-loop-arrow, .exp-page .sgd-loop__step, .exp-page .sgd-loop__return, .exp-page .sgd-loop__claim{opacity:1 !important;transform:none !important} .exp-page .sgd-card__visual img{transform:none !important} }