/* Ancrage sous l'en-tete collante. MESURE DU 28/08, apres le passage de la zone de protection a 19 px : l'en-tete de ces pages fait 102 px (19 + 64 de logotype + 19), et il est position:sticky, donc il couvre le haut de la fenetre en permanence. Avec 92 px, une ancre s'arretait 10 px trop haut et laissait ce bandeau derriere l'en-tete. Un releve anterieur donnait 94 px, valeur exacte quand la protection valait encore 15 px : elle a change depuis, et c'est bien la mesure du jour qui fait foi. 108 et non 102 : six pixels de respiration, pour que le titre vise ne colle pas au bord de l'en-tete. */ html{scroll-behavior:smooth;scroll-padding-top:108px;} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}} body{margin:0;font-family:var(--font-display);background:var(--white);color:var(--text);-webkit-font-smoothing:antialiased;} .wrap{max-width:820px;margin:0 auto;padding:0 clamp(24px,5vw,48px);} a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;} /* En-tete */ /* Zone de protection, 28/08 : 19 px pour 18,63 exiges autour d'un logo de 64 px. La charte demande la DEMI-HAUTEUR DE CAPITALE, que Sora declare a 730 millimes, et non la demi-hauteur d'encre du S, qui vaut 768 et deborde optiquement. Reperage sans outil : la marge est la moitie de la hauteur du l de Soralva. */ .entete{position:sticky;top:0;z-index:50;background:var(--ink-deep);padding:19px 0;} .entete__inner{max-width:1240px;margin:0 auto;padding:0 clamp(24px,5vw,48px); display:flex;align-items:center;justify-content:space-between;gap:20px;} .logo{display:block;height:64px;width:auto;} /* Menu du site, repris de la page d'accueil. Ces pages sont celles ou l'on arrive depuis une recherche, sans etre passe par l'accueil : sans menu, le lecteur ne pouvait aller nulle part ailleurs. L'en-tete d'article etant sombre comme celle de l'accueil, les couleurs se transposent telles quelles. */ .nav{display:flex;align-items:center;gap:28px;} .nav a{font-size:15px;color:rgba(244,248,251,.8);text-decoration:none;white-space:nowrap;} .nav a:hover{color:var(--white);} .nav a[aria-current="page"]{color:var(--white);} /* min-height 44px : la charte, section 05, tient toute cible qui sert a AGIR aux 44 px « sans exception ». Ce bouton mesurait 39 px a 1280 px de large, soit la troisieme entorse a une regle qui n'en admet aucune. Le padding vertical reste a 10 px, c'est la hauteur qui est garantie ; inline-flex et align-items recentrent le texte, un min-height seul l'aurait laisse en haut. Les blocs sous 900 px sont ecrits plus bas et gagnent a specificite egale. */ .nav a.nav__cta{background:var(--gold);color:var(--ink-deep);padding:10px 20px; border-radius:var(--radius-ui);font-weight:500; display:inline-flex;align-items:center;min-height:44px;} .nav a.nav__cta:hover{background:var(--gold-dark);color:var(--ink-deep);} .bascule-menu{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;} .bouton-menu{display:none;} /* Le bouton de l'en-tete ne sert QUE sous la rupture, la ou le menu est replie derriere le bouton a trois barres et n'offre donc aucun acces direct au contact. Au-dessus, le menu porte deja son propre bouton or : les deux ensemble faisaient deux « Me contacter » sur la meme ligne. */ /* Cible tactile du bouton de contact. MESURE AVANT CORRECTION, 28/08, sur conseils.html a 375 px : 131 x 36 px, min-height:auto. Les 36 px passent le critere WCAG 2.5.8 (24 px) mais ratent les 44 px de la charte, que le socle vient de reaffirmer : « toute cible qui sert a AGIR reste tenue aux 44 px, sans exception ». Et c'est le bouton principal de l'en-tete sur telephone, sur les cinq pages ou arrive le trafic froid. Meme cause que A5 : la correction du 27/08 est allee dans le style en ligne de l'accueil (.entete__cta-mobile) et pas ici. Les deux classes ne portant pas le meme nom, la regle ne peut pas etre mutualisee telle quelle dans le socle ; elle le sera au deplacement complet du menu. min-height et pas un padding vertical : la valeur reste vraie quelle que soit la taille de police heritee. */ .entete__cta{display:none;background:var(--gold);color:var(--ink-deep);font-size:14px;font-weight:500; padding:9px 18px;min-height:44px;border-radius:var(--radius-ui);text-decoration:none;white-space:nowrap;} .entete__cta:hover{background:var(--gold-dark);color:var(--ink-deep);} /* Cible tactile des entrees de menu. MESURE AVANT CORRECTION, 28/08, sur conseils.html a 1280 px : les cinq entrees du menu font 18,4 px de haut et le bouton or 38,4 px. Le mot « menu » figure explicitement dans la liste des cibles que la charte tient aux 44 px « sans exception », regle que le socle porte depuis le 28/08. Ce n'etait pas un defaut d'accessibilite, les deux cas passant WCAG 2.5.8 par l'exception d'espacement ; c'est une regle du projet rendue fausse par le code, ce qui coute plus cher sur un site qui vend la rigueur. La correction ne deplace RIEN a l'oeil : l'en-tete fait 102 px de haut, fixes par le logotype de 64 px, donc porter le menu de 18,4 a 44 px reste tres en dessous et .entete__inner centre deja ses enfants. Seule la zone cliquable grandit. Sous 901 px la regle ne s'applique pas : le panneau deroulant donne deja 47,2 px par entree, mesures, et .nav a y passe en bloc pleine largeur. */ @media (min-width:901px){ .nav a{display:inline-flex;align-items:center;min-height:44px;} } /* Fil d'ariane */ /* Le fil d'ariane porte le retour a sa droite : c'est la ligne qui dit deja ou l'on se trouve, donc celle ou l'on cherche par quoi en sortir. Il quitte l'en-tete, ou il faisait double emploi avec le logo. */ .fil{padding:18px 0 0;font-size:13px;color:var(--slate); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;} .fil__retour{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;min-height:44px; font-family:var(--font-display);font-size:13px;font-weight:500;color:var(--ink); padding:0 16px;border:1px solid var(--border);border-radius:var(--radius-ui); text-decoration:none;white-space:nowrap;} .fil__retour:hover{border-color:var(--ink);background:var(--off-white);color:var(--ink);} .fil a{color:var(--slate);text-decoration:none;} .fil a:hover{color:var(--gold-deep);text-decoration:underline;} /* Tete d'article */ .tete{padding:20px 0 8px;} .tete__oeil{margin:0 0 12px;font-family:var(--font-mono);font-size:11.5px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep);} h1{margin:0 0 18px;font-size:clamp(28px,3.8vw,42px);font-weight:700;letter-spacing:-1px; line-height:1.16;color:var(--ink);text-wrap:pretty;} .tete__chapo{margin:0;font-family:var(--font-serif);font-size:clamp(18px,1.8vw,20px); line-height:1.6;color:var(--slate);} .tete__meta{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--border); font-size:13px;color:var(--slate);} /* Reponse courte, encadre extractible */ .reponse{margin:32px 0;padding:26px 30px;background:var(--off-white); border-left:3px solid var(--gold);border-radius:0 var(--radius-card) var(--radius-card) 0;} .reponse__titre{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--gold-deep);} .reponse p{margin:0;font-family:var(--font-serif);font-size:17px;line-height:1.65;color:var(--text);} .reponse p + p{margin-top:10px;} /* Corps */ main{padding-bottom:clamp(48px,7vw,80px);} h2{margin:44px 0 14px;font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.5px; line-height:1.25;color:var(--ink);} h3{margin:30px 0 10px;font-size:18px;font-weight:700;letter-spacing:-.2px;color:var(--ink);} p{margin:0 0 14px;font-family:var(--font-serif);font-size:17px;line-height:1.72;color:var(--text);} strong{font-family:var(--font-display);font-weight:700;color:var(--ink);} ul,ol{margin:0 0 16px;padding-left:22px;font-family:var(--font-serif);font-size:17px; line-height:1.72;color:var(--text);} li{margin-bottom:8px;} li strong{font-family:var(--font-display);} /* Reserve 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;} /* Tableau */ .tableau{overflow-x:auto;margin:0 0 20px;} /* Tableaux atteignables au clavier, WCAG 2.1.1 niveau A. MESURE AVANT CORRECTION, sur prix-site-internet-gite.html a 375 px de fenetre : le premier tableau, celui a quatre colonnes qui repond a « combien coute un site pour un gite », avait scrollWidth 572 pour clientWidth 327, soit 245 px de contenu a faire defiler, et son conteneur ne portait NI tabindex, NI role, NI nom accessible. Un utilisateur au clavier voyait donc une colonne coupee sans aucun moyen d'atteindre les suivantes. Le conteneur devient une region focusable ; il lui faut alors un anneau, sans quoi on ne saurait pas ou l'on vient d'arriver. --gold-deep vaut 5,48:1 sur le blanc du corps de page. */ .tableau:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;} /* Ligne du tableau comparatif qui designe notre propre categorie, 29/08. Le gras porte sur la LIGNE ENTIERE et non sur une cellule : le lecteur qui parcourt un tableau lit en diagonale, et un seul mot en gras se perdrait entre les montants, deja en gras dans les colonnes chiffrees. Pas de couleur de fond ni de bordure : sur un tableau qui compare des concurrents, une mise en avant visuelle trop forte transforme un releve en publicite, et c'est la credibilite du releve qui paie. */ .tableau tr.ligne-nous td{font-weight:700;} table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px;} th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border); font-family:var(--font-serif);vertical-align:top;} th{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink); background:var(--off-white);} td strong{font-family:var(--font-mono);font-weight:500;color:var(--ink);} /* Encadre attention */ .note{margin:26px 0;padding:20px 24px;background:rgba(190,144,32,.08); border:1px solid rgba(190,144,32,.32);border-radius:var(--radius-card);} .note p{margin:0;font-size:16px;} .note p + p{margin-top:10px;} .note__titre{margin:0 0 8px;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);} /* Liste a coches */ .coches{list-style:none;padding:0;margin:0 0 20px;} .coches li{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px;} .coches svg{flex-shrink:0;width:17px;height:17px;color:var(--gold);margin-top:5px;} /* Bloc de fin, appel a l'action */ .fin{margin:52px 0 0;padding:34px 36px;background:var(--ink-deep);border-radius:var(--radius-card);} .fin h2{margin:0 0 12px;color:#FFFFFF;font-size:22px;} .fin p{margin:0 0 20px;color:rgba(244,248,251,.8);font-size:16px;} .fin a.bouton{display:inline-block;background:var(--gold);color:var(--ink-deep);font-size:15px; font-weight:500;padding:14px 26px;border-radius:var(--radius-ui);text-decoration:none;} .fin a.bouton:hover{background:var(--gold-dark);color:var(--ink-deep);} /* Pages liees */ /* --- Bloc de preuve d'existence ------------------------------------- Ajoute le 28/08. Les trois pages de conseils sont, par decision, des pages d'ARRIVEE : on y entre depuis une recherche, sans etre passe par l'accueil. Le lecteur y trouvait donc les arguments sans jamais savoir qui les tient. Fond CLAIR volontairement : le bloc d'appel a l'action qui suit est sur encre profonde, deux blocs sombres a la suite se confondraient. */ .preuve{display:flex;gap:24px;align-items:flex-start;margin:52px 0 0; padding:26px 30px;background:var(--off-white);border:1px solid var(--border); border-left:3px solid var(--gold-deep);border-radius:var(--radius-card);} .preuve__photo{flex-shrink:0;width:104px;height:130px;object-fit:cover; border-radius:var(--radius-ui);} .preuve__texte{min-width:0;} .preuve__nom{margin:0;font-family:var(--font-display);font-weight:700; font-size:18px;line-height:1.3;color:var(--ink);} .preuve__role{margin:3px 0 14px;font-size:12.5px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);} .preuve__para{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--text);} /* 15,5 x 1,6 + 2 x 10 = 44,8 px : la cible tactile de 44 px est tenue sans faire de ce lien un second bouton, qui concurrencerait l'appel a l'action situe juste en dessous. */ .preuve__lien{display:inline-block;padding:10px 0;font-weight:700; font-size:15.5px;line-height:1.6;color:var(--gold-deep);} @media(max-width:560px){ .preuve{flex-direction:column;gap:18px;padding:22px 24px;} .preuve__photo{width:88px;height:110px;} } .liees{margin:44px 0 0;padding-top:28px;border-top:1px solid var(--border);} .liees__titre{margin:0 0 16px;font-size:14px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--slate);} .liees ul{list-style:none;padding:0;margin:0;} .liees li{margin-bottom:10px;} .liees a{font-family:var(--font-display);font-size:16px;font-weight:500;text-decoration:none;color:var(--ink);} .liees a:hover{color:var(--gold-deep);text-decoration:underline;} /* Retour a l'accueil, en fin de contenu */ .retour-accueil{margin:36px 0 0;padding-top:24px;border-top:1px solid var(--border);} .retour-accueil a{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display); font-size:15px;font-weight:500;color:var(--ink);text-decoration:none; padding:12px 22px;border:1px solid var(--border);border-radius:var(--radius-ui);} .retour-accueil a:hover{border-color:var(--ink);background:var(--off-white);color:var(--ink);} /* Pied de page */ .pied{background:var(--ink-deep);padding:34px 0;} .pied__inner{max-width:1240px;margin:0 auto;padding:0 clamp(24px,5vw,48px); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;} .pied__liens a{font-size:13px;color:rgba(244,248,251,.55);text-decoration:none;} /* Meme rupture et meme mecanique que l'accueil : case a cocher masquee, bouton a trois barres, panneau deroulant. Aucune ligne de JavaScript. */ @media (max-width:900px){ .entete__inner{position:relative;gap:10px;} .entete__cta{display:inline-flex;align-items:center;margin-left:auto;} /* En-tete a 375 px : les trois enfants ne tenaient pas cote a cote. MESURE AVANT CORRECTION, 28/08, sur prix-site-internet-gite.html : .logo-lien 180,9 px, .entete__cta 130,9 px, deux gouttieres de 10 px, et 327 px offerts par le .wrap. Il restait 4,3 px pour un bouton qui en demande 44. Aucun des trois enfants ne portait flex-shrink:0 : la flexbox a donc comprime le plus etroit. Boite ramenee a 20 x 44, et comme box-sizing:border-box plus padding:0 10px retirent 20 px, la boite de CONTENU tombait a 0 : les trois barres mesuraient 0 px de large, mesure faite. Sur ces pages le bouton n'a aucun fond, il n'y avait donc RIEN de dessine a cet endroit. Bord droit a 375,8 px pour une fenetre de 320, soit 56 px de debordement horizontal. Le logotype ne peut pas ceder a la place : la charte lui interdit la baseline sous 180 px de large, et son symbole passe sous le plancher de 28 px des que la boite descend sous 45,6 px de haut (mesure : le symbole occupe 32,38 des 52,68 unites du viewBox, soit 61,5 %). */ .logo-lien,.entete__cta,.bouton-menu{flex-shrink:0;} .bouton-menu{display:flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:0 10px;cursor:pointer;} .bouton-menu span{display:block;height:2px;background:var(--white);border-radius:2px; transition:transform .3s,opacity .2s;} .bascule-menu:checked ~ .bouton-menu span:nth-child(1){transform:translateY(6px) rotate(45deg);} .bascule-menu:checked ~ .bouton-menu span:nth-child(2){opacity:0;} .bascule-menu:checked ~ .bouton-menu span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} .bascule-menu:focus-visible ~ .bouton-menu{outline:2px solid var(--white);outline-offset:3px;} .nav{position:absolute;top:calc(100% + 14px);right:0;left:0; flex-direction:column;align-items:stretch;gap:0;padding:6px 0; background:rgba(16,29,39,.97);border:1px solid rgba(244,248,251,.12); border-radius:var(--radius-card);box-shadow:0 18px 40px -18px rgba(0,0,0,.7); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s ease,transform .22s ease,visibility .22s;} .bascule-menu:checked ~ .nav{opacity:1;visibility:visible;transform:translateY(0);} .nav a{padding:14px 22px;border-bottom:1px solid rgba(244,248,251,.08);} .nav a:last-child{border-bottom:0;} .nav a:not(.nav__cta):hover{background:rgba(244,248,251,.06);} /* Le bouton or est deja dans l'en-tete a cette largeur, inutile de le repeter. */ .nav a.nav__cta{display:none;} } @supports (backdrop-filter:blur(8px)){ @media (max-width:900px){ .nav{background:rgba(16,29,39,.9);backdrop-filter:blur(14px);} } } /* HUITIEME POINT DE RUPTURE, suite du bloc ci-dessus. Il se calcule. Budget de l'en-tete sur ces pages : 180,9 (logotype) + 10 + 130,9 (« Me contacter ») + 10 + 44 (bouton) = 375,8 px, contre une fenetre moins les 48 px de rembourrage du .wrap. Les trois ne tiennent donc qu'a partir de 423,8 px de large. AUCUN telephone courant n'y arrive : 320, 360, 375, 390 et 414 px sont tous en dessous. flex-shrink:0 seul ne suffisait pas : il transforme la compression du bouton en debordement de la page. Quelque chose doit ceder, et ce ne peut pas etre le logotype (voir le motif ci-dessus). C'est donc le bouton or de l'en-tete. Il ne DISPARAIT pas pour autant : il reprend sa place dans le panneau deroulant, ou il etait masque justement parce que l'en-tete le portait deja. Le contact reste a un appui de plus, jamais a zero. Verification a 320 px apres correction : 24 + 180,9 + 10 + 44 + 24 = 282,9 px pour 320 offerts, 37 px de marge. 460 et non 424 : a 424 le compte tombe juste, sans un pixel de marge, et la largeur d'un texte varie avec la police reellement chargee. A 461 px il reste 37 px, et la plage 424-460 ne contient aucun appareil. */ @media (max-width:460px){ .entete__cta{display:none;} /* Les 44 px de la charte sont poses ici et pas herites : le padding 10px 20px du bouton or de bureau ne donne que 38 px de haut, ce que la regle des 44 px interdit deja ailleurs dans ce fichier. */ .nav a.nav__cta{display:flex;align-items:center;justify-content:center; min-height:44px;margin:8px 18px;padding:0 16px;font-size:14px;border-bottom:0;} } @media (max-width:700px){ .pied__inner{flex-direction:column;align-items:flex-start;} .fin{padding:26px 24px;} /* 27/08, vu en usage reel sur telephone : un ascenseur horizontal apparaissait sous les tableaux sur mobile. La cause n'etait pas le contenu mais le min-width:460px de la ligne 107 : sur un ecran de 375 px le conteneur fait 327, donc la regle fabriquait 133 px de debordement quelle que soit la longueur des cellules. Ici le plancher saute et le corps se resserre, les tableaux tiennent alors dans la largeur. Le overflow-x:auto de .tableau reste en filet de securite pour les ecrans tres etroits, il ne se declenche simplement plus a 375. */ table{min-width:0;font-size:14px;} /* 8px de mieux par colonne : mesure faite apres coup, un des cinq tableaux depassait encore de 8 px avec 10 px de marge laterale. Un ascenseur pour 8 px est plus penible qu'utile. */ table th,table td{padding-left:8px;padding-right:8px;} } /* Largeur de colonne, releve du 27/08 : le texte faisait 724 px, soit 85 a 87 signes par ligne, au-dessus du plafond de 80 de WCAG 1.4.8 et loin de l'optimum de 66. Sur des articles de 1 200 a 1 450 mots lus par des quinquagenaires, c'est le retour a la ligne qui coute. On ne contraint que le texte courant : tableaux, encadres et blocs de fin gardent les 820 px. CE QUE 68ch DONNE REELLEMENT, mesure du 28/08 a 1440 px : 73 a 78 signes par ligne, et non 68. L'unite ch vaut la chasse du zero, plus large que la moyenne d'un texte francais en Source Serif 4. La valeur est donc GARDEE, parce qu'elle tient l'objectif qui compte, le plafond de 80 de WCAG 1.4.8, mais le chiffre du selecteur n'est pas un nombre de signes et ce commentaire ne doit pas laisser croire l'inverse. Viser vraiment 68 signes demanderait 60ch, au prix d'une colonne plus etroite que rien n'exige. */ main p, main ul, main ol{max-width:68ch;} /* FAQ d'article, ajoutee le 28/08. Ces pages declaraient un FAQPage dont douze questions sur quatorze n'apparaissaient nulle part a l'ecran. Le balisage annoncait donc a Google et aux IA un contenu inexistant, ce qui expose a la perte du resultat enrichi et, pour une marque qui vend la conformite du balisage, a un probleme de fond. Accordeon natif : aucun JavaScript, et ferme par defaut pour ne pas allonger la page a la lecture. */ .faq-art{margin:48px 0 0;} .faq-art__titre{margin:0 0 18px;} .faq-art__liste{display:flex;flex-direction:column;gap:10px;} .faq-art__item{background:var(--white);border:1px solid var(--border); border-radius:var(--radius-card);overflow:hidden;} .faq-art__item summary{list-style:none;cursor:pointer;padding:16px 20px; font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink); display:flex;align-items:center;justify-content:space-between;gap:14px;} .faq-art__item summary::-webkit-details-marker{display:none;} .faq-art__item summary::after{content:"+";font-family:var(--font-mono);font-size:19px; font-weight:400;color:var(--gold-deep);flex:none;line-height:1;} /* Le caractere de fermeture est ecrit en echappement CSS. Le 28/08 cette ligne portait \2212, relu comme un echappement OCTAL par le script qui l'a ecrite : \221 vaut 0x91, un caractere de controle invisible, et le 2 restait seul. Le bouton affichait donc « 2 » a l'ouverture. U+2013 et non U+2212 : ce dernier est absent du sous-ensemble incorpore d'IBM Plex Mono. Mesure des traits dans la police : barre du + 476 unites, demi-cadratin 480, trait d'union simple 302. */ .faq-art__item[open] summary::after{content:"\2013";} .faq-art__item summary:hover{background:var(--off-white);} /* Le contour de focus ne se prend pas sur summary seul : sans cette regle, un visiteur au clavier ne voit pas ou il est. */ .faq-art__item summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px;} .faq-art__rep{padding:0 20px 18px;margin:0;font-family:var(--font-serif); font-size:16px;line-height:1.7;color:var(--text);}