/* Clash Display (ITF Free Font License 2.0 : auto-hébergement autorisé, fichiers officiels non modifiés) */
@font-face{font-family:'Clash Display';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ClashDisplay-Medium.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ClashDisplay-Semibold.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ClashDisplay-Bold.woff2) format('woff2')}
/* Figtree (SIL Open Font License 1.1), auto-hébergée : police variable, graisses 400 à 800 */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--art-clover:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201082%201083%27%20fill%3D%27none%27%20stroke%3D%27%23C3D0CC%27%20stroke-opacity%3D%271%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M555.972%20117.93H790.087V410.371C790.087%20474.868%20737.699%20527.117%20673.03%20527.117C608.36%20527.117%20555.972%20474.868%20555.972%20410.371V117.93Z%27%2F%3E%3Cpath%20d%3D%27M673.03%20234.676C737.679%20234.676%20790.087%20182.407%20790.087%20117.93C790.087%2053.4523%20737.679%201.18311%20673.03%201.18311C608.38%201.18311%20555.972%2053.4523%20555.972%20117.93C555.972%20182.407%20608.38%20234.676%20673.03%20234.676Z%27%2F%3E%3Cpath%20d%3D%27M966.248%20293.811V527.304H673.028C608.358%20527.304%20555.97%20475.055%20555.97%20410.557C555.97%20346.06%20608.358%20293.811%20673.028%20293.811H966.248Z%27%2F%3E%3Cpath%20d%3D%27M963.942%20527.112C1028.59%20527.112%201081%20474.843%201081%20410.365C1081%20345.888%201028.59%20293.619%20963.942%20293.619C899.293%20293.619%20846.884%20345.888%20846.884%20410.365C846.884%20474.843%20899.293%20527.112%20963.942%20527.112Z%27%2F%3E%3Cpath%20d%3D%27M963.947%20554.678V788.171H670.727C606.057%20788.171%20553.669%20735.923%20553.669%20671.425C553.669%20606.927%20606.057%20554.678%20670.727%20554.678H963.947Z%27%2F%3E%3Cpath%20d%3D%27M963.942%20788.171C1028.59%20788.171%201081%20735.902%201081%20671.425C1081%20606.948%201028.59%20554.678%20963.942%20554.678C899.293%20554.678%20846.884%20606.948%20846.884%20671.425C846.884%20735.902%20899.293%20788.171%20963.942%20788.171Z%27%2F%3E%3Cpath%20d%3D%27M787.784%20963.862H553.669V671.422C553.669%20606.924%20606.057%20554.676%20670.726%20554.676C735.396%20554.676%20787.784%20606.924%20787.784%20671.422V963.862Z%27%2F%3E%3Cpath%20d%3D%27M670.729%201078.32C735.378%201078.32%20787.787%201026.05%20787.787%20961.571C787.787%20897.094%20735.378%20844.825%20670.729%20844.825C606.08%20844.825%20553.671%20897.094%20553.671%20961.571C553.671%201026.05%20606.08%201078.32%20670.729%201078.32Z%27%2F%3E%3Cpath%20d%3D%27M528.531%20964.245H294.415V671.805C294.415%20607.307%20346.803%20555.058%20411.473%20555.058C476.143%20555.058%20528.531%20607.307%20528.531%20671.805V964.245Z%27%2F%3E%3Cpath%20d%3D%27M411.283%201081.18C475.933%201081.18%20528.341%201028.91%20528.341%20964.437C528.341%20899.96%20475.933%20847.69%20411.283%20847.69C346.634%20847.69%20294.226%20899.96%20294.226%20964.437C294.226%201028.91%20346.634%201081.18%20411.283%201081.18Z%27%2F%3E%3Cpath%20d%3D%27M118.255%20788.748L118.255%20555.255H411.475C476.145%20555.255%20528.533%20607.503%20528.533%20672.001C528.533%20736.499%20476.145%20788.748%20411.475%20788.748H118.255Z%27%2F%3E%3Cpath%20d%3D%27M120.36%20788.746C185.009%20788.746%20237.417%20736.477%20237.417%20672C237.417%20607.523%20185.009%20555.253%20120.36%20555.253C55.7103%20555.253%203.30176%20607.523%203.30176%20672C3.30176%20736.477%2055.7103%20788.746%20120.36%20788.746Z%27%2F%3E%3Cpath%20d%3D%27M118.063%20527.688L118.063%20294.195H411.283C475.953%20294.195%20528.341%20346.444%20528.341%20410.942C528.341%20475.439%20475.953%20527.688%20411.283%20527.688H118.063Z%27%2F%3E%3Cpath%20d%3D%27M118.058%20527.688C182.707%20527.688%20235.116%20475.419%20235.116%20410.941C235.116%20346.464%20182.707%20294.195%20118.058%20294.195C53.4086%20294.195%201%20346.464%201%20410.941C1%20475.419%2053.4086%20527.688%20118.058%20527.688Z%27%2F%3E%3Cpath%20d%3D%27M294.226%20118.505H528.341V410.946C528.341%20475.443%20475.953%20527.692%20411.283%20527.692C346.614%20527.692%20294.226%20475.443%20294.226%20410.946V118.505Z%27%2F%3E%3Cpath%20d%3D%27M411.283%20237.551C475.933%20237.551%20528.341%20185.282%20528.341%20120.805C528.341%2056.3277%20475.933%204.05853%20411.283%204.05853C346.634%204.05853%20294.226%2056.3277%20294.226%20120.805C294.226%20185.282%20346.634%20237.551%20411.283%20237.551Z%27%2F%3E%3C%2Fsvg%3E");--art-caps:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201461%20654%27%20fill%3D%27none%27%20stroke%3D%27%23C3D0CC%27%20stroke-opacity%3D%271%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M319.939%20653L319.939%201.13933L1134.06%201.13929C1313.61%201.13929%201459.07%20147.007%201459.07%20327.07C1459.07%20507.133%201313.61%20653%201134.06%20653L319.939%20653Z%27%2F%3E%3Cpath%20d%3D%27M651.352%20327.069C651.352%20147.063%20505.841%201.13908%20326.344%201.13908C146.847%201.13909%201.33543%20147.063%201.33543%20327.07C1.33544%20507.076%20146.847%20653%20326.344%20653C505.841%20653%20651.352%20507.076%20651.352%20327.069Z%27%2F%3E%3C%2Fsvg%3E");--art-trefle:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201082%201083%27%20fill%3D%27none%27%20stroke%3D%27%23043428%27%20stroke-opacity%3D%271%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M555.972%20117.93H790.087V410.371C790.087%20474.868%20737.699%20527.117%20673.03%20527.117C608.36%20527.117%20555.972%20474.868%20555.972%20410.371V117.93Z%27%2F%3E%3Cpath%20d%3D%27M673.03%20234.676C737.679%20234.676%20790.087%20182.407%20790.087%20117.93C790.087%2053.4523%20737.679%201.18311%20673.03%201.18311C608.38%201.18311%20555.972%2053.4523%20555.972%20117.93C555.972%20182.407%20608.38%20234.676%20673.03%20234.676Z%27%2F%3E%3Cpath%20d%3D%27M966.248%20293.811V527.304H673.028C608.358%20527.304%20555.97%20475.055%20555.97%20410.557C555.97%20346.06%20608.358%20293.811%20673.028%20293.811H966.248Z%27%2F%3E%3Cpath%20d%3D%27M963.942%20527.112C1028.59%20527.112%201081%20474.843%201081%20410.365C1081%20345.888%201028.59%20293.619%20963.942%20293.619C899.293%20293.619%20846.884%20345.888%20846.884%20410.365C846.884%20474.843%20899.293%20527.112%20963.942%20527.112Z%27%2F%3E%3Cpath%20d%3D%27M963.947%20554.678V788.171H670.727C606.057%20788.171%20553.669%20735.923%20553.669%20671.425C553.669%20606.927%20606.057%20554.678%20670.727%20554.678H963.947Z%27%2F%3E%3Cpath%20d%3D%27M963.942%20788.171C1028.59%20788.171%201081%20735.902%201081%20671.425C1081%20606.948%201028.59%20554.678%20963.942%20554.678C899.293%20554.678%20846.884%20606.948%20846.884%20671.425C846.884%20735.902%20899.293%20788.171%20963.942%20788.171Z%27%2F%3E%3Cpath%20d%3D%27M787.784%20963.862H553.669V671.422C553.669%20606.924%20606.057%20554.676%20670.726%20554.676C735.396%20554.676%20787.784%20606.924%20787.784%20671.422V963.862Z%27%2F%3E%3Cpath%20d%3D%27M670.729%201078.32C735.378%201078.32%20787.787%201026.05%20787.787%20961.571C787.787%20897.094%20735.378%20844.825%20670.729%20844.825C606.08%20844.825%20553.671%20897.094%20553.671%20961.571C553.671%201026.05%20606.08%201078.32%20670.729%201078.32Z%27%2F%3E%3Cpath%20d%3D%27M528.531%20964.245H294.415V671.805C294.415%20607.307%20346.803%20555.058%20411.473%20555.058C476.143%20555.058%20528.531%20607.307%20528.531%20671.805V964.245Z%27%2F%3E%3Cpath%20d%3D%27M411.283%201081.18C475.933%201081.18%20528.341%201028.91%20528.341%20964.437C528.341%20899.96%20475.933%20847.69%20411.283%20847.69C346.634%20847.69%20294.226%20899.96%20294.226%20964.437C294.226%201028.91%20346.634%201081.18%20411.283%201081.18Z%27%2F%3E%3Cpath%20d%3D%27M118.255%20788.748L118.255%20555.255H411.475C476.145%20555.255%20528.533%20607.503%20528.533%20672.001C528.533%20736.499%20476.145%20788.748%20411.475%20788.748H118.255Z%27%2F%3E%3Cpath%20d%3D%27M120.36%20788.746C185.009%20788.746%20237.417%20736.477%20237.417%20672C237.417%20607.523%20185.009%20555.253%20120.36%20555.253C55.7103%20555.253%203.30176%20607.523%203.30176%20672C3.30176%20736.477%2055.7103%20788.746%20120.36%20788.746Z%27%2F%3E%3Cpath%20d%3D%27M118.063%20527.688L118.063%20294.195H411.283C475.953%20294.195%20528.341%20346.444%20528.341%20410.942C528.341%20475.439%20475.953%20527.688%20411.283%20527.688H118.063Z%27%2F%3E%3Cpath%20d%3D%27M118.058%20527.688C182.707%20527.688%20235.116%20475.419%20235.116%20410.941C235.116%20346.464%20182.707%20294.195%20118.058%20294.195C53.4086%20294.195%201%20346.464%201%20410.941C1%20475.419%2053.4086%20527.688%20118.058%20527.688Z%27%2F%3E%3Cpath%20d%3D%27M294.226%20118.505H528.341V410.946C528.341%20475.443%20475.953%20527.692%20411.283%20527.692C346.614%20527.692%20294.226%20475.443%20294.226%20410.946V118.505Z%27%2F%3E%3Cpath%20d%3D%27M411.283%20237.551C475.933%20237.551%20528.341%20185.282%20528.341%20120.805C528.341%2056.3277%20475.933%204.05853%20411.283%204.05853C346.634%204.05853%20294.226%2056.3277%20294.226%20120.805C294.226%20185.282%20346.634%20237.551%20411.283%20237.551Z%27%2F%3E%3C%2Fsvg%3E");--art-clover-v:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201082%201083%27%20fill%3D%27none%27%20stroke%3D%27%2394C28A%27%20stroke-opacity%3D%271%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M555.972%20117.93H790.087V410.371C790.087%20474.868%20737.699%20527.117%20673.03%20527.117C608.36%20527.117%20555.972%20474.868%20555.972%20410.371V117.93Z%27%2F%3E%3Cpath%20d%3D%27M673.03%20234.676C737.679%20234.676%20790.087%20182.407%20790.087%20117.93C790.087%2053.4523%20737.679%201.18311%20673.03%201.18311C608.38%201.18311%20555.972%2053.4523%20555.972%20117.93C555.972%20182.407%20608.38%20234.676%20673.03%20234.676Z%27%2F%3E%3Cpath%20d%3D%27M966.248%20293.811V527.304H673.028C608.358%20527.304%20555.97%20475.055%20555.97%20410.557C555.97%20346.06%20608.358%20293.811%20673.028%20293.811H966.248Z%27%2F%3E%3Cpath%20d%3D%27M963.942%20527.112C1028.59%20527.112%201081%20474.843%201081%20410.365C1081%20345.888%201028.59%20293.619%20963.942%20293.619C899.293%20293.619%20846.884%20345.888%20846.884%20410.365C846.884%20474.843%20899.293%20527.112%20963.942%20527.112Z%27%2F%3E%3Cpath%20d%3D%27M963.947%20554.678V788.171H670.727C606.057%20788.171%20553.669%20735.923%20553.669%20671.425C553.669%20606.927%20606.057%20554.678%20670.727%20554.678H963.947Z%27%2F%3E%3Cpath%20d%3D%27M963.942%20788.171C1028.59%20788.171%201081%20735.902%201081%20671.425C1081%20606.948%201028.59%20554.678%20963.942%20554.678C899.293%20554.678%20846.884%20606.948%20846.884%20671.425C846.884%20735.902%20899.293%20788.171%20963.942%20788.171Z%27%2F%3E%3Cpath%20d%3D%27M787.784%20963.862H553.669V671.422C553.669%20606.924%20606.057%20554.676%20670.726%20554.676C735.396%20554.676%20787.784%20606.924%20787.784%20671.422V963.862Z%27%2F%3E%3Cpath%20d%3D%27M670.729%201078.32C735.378%201078.32%20787.787%201026.05%20787.787%20961.571C787.787%20897.094%20735.378%20844.825%20670.729%20844.825C606.08%20844.825%20553.671%20897.094%20553.671%20961.571C553.671%201026.05%20606.08%201078.32%20670.729%201078.32Z%27%2F%3E%3Cpath%20d%3D%27M528.531%20964.245H294.415V671.805C294.415%20607.307%20346.803%20555.058%20411.473%20555.058C476.143%20555.058%20528.531%20607.307%20528.531%20671.805V964.245Z%27%2F%3E%3Cpath%20d%3D%27M411.283%201081.18C475.933%201081.18%20528.341%201028.91%20528.341%20964.437C528.341%20899.96%20475.933%20847.69%20411.283%20847.69C346.634%20847.69%20294.226%20899.96%20294.226%20964.437C294.226%201028.91%20346.634%201081.18%20411.283%201081.18Z%27%2F%3E%3Cpath%20d%3D%27M118.255%20788.748L118.255%20555.255H411.475C476.145%20555.255%20528.533%20607.503%20528.533%20672.001C528.533%20736.499%20476.145%20788.748%20411.475%20788.748H118.255Z%27%2F%3E%3Cpath%20d%3D%27M120.36%20788.746C185.009%20788.746%20237.417%20736.477%20237.417%20672C237.417%20607.523%20185.009%20555.253%20120.36%20555.253C55.7103%20555.253%203.30176%20607.523%203.30176%20672C3.30176%20736.477%2055.7103%20788.746%20120.36%20788.746Z%27%2F%3E%3Cpath%20d%3D%27M118.063%20527.688L118.063%20294.195H411.283C475.953%20294.195%20528.341%20346.444%20528.341%20410.942C528.341%20475.439%20475.953%20527.688%20411.283%20527.688H118.063Z%27%2F%3E%3Cpath%20d%3D%27M118.058%20527.688C182.707%20527.688%20235.116%20475.419%20235.116%20410.941C235.116%20346.464%20182.707%20294.195%20118.058%20294.195C53.4086%20294.195%201%20346.464%201%20410.941C1%20475.419%2053.4086%20527.688%20118.058%20527.688Z%27%2F%3E%3Cpath%20d%3D%27M294.226%20118.505H528.341V410.946C528.341%20475.443%20475.953%20527.692%20411.283%20527.692C346.614%20527.692%20294.226%20475.443%20294.226%20410.946V118.505Z%27%2F%3E%3Cpath%20d%3D%27M411.283%20237.551C475.933%20237.551%20528.341%20185.282%20528.341%20120.805C528.341%2056.3277%20475.933%204.05853%20411.283%204.05853C346.634%204.05853%20294.226%2056.3277%20294.226%20120.805C294.226%20185.282%20346.634%20237.551%20411.283%20237.551Z%27%2F%3E%3C%2Fsvg%3E");--art-caps-v:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201461%20654%27%20fill%3D%27none%27%20stroke%3D%27%2394C28A%27%20stroke-opacity%3D%271%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M319.939%20653L319.939%201.13933L1134.06%201.13929C1313.61%201.13929%201459.07%20147.007%201459.07%20327.07C1459.07%20507.133%201313.61%20653%201134.06%20653L319.939%20653Z%27%2F%3E%3Cpath%20d%3D%27M651.352%20327.069C651.352%20147.063%20505.841%201.13908%20326.344%201.13908C146.847%201.13909%201.33543%20147.063%201.33543%20327.07C1.33544%20507.076%20146.847%20653%20326.344%20653C505.841%20653%20651.352%20507.076%20651.352%20327.069Z%27%2F%3E%3C%2Fsvg%3E");--art-clover-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201082%201083%27%20fill%3D%27none%27%20stroke%3D%27%237FA2D2%27%20stroke-opacity%3D%271%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M555.972%20117.93H790.087V410.371C790.087%20474.868%20737.699%20527.117%20673.03%20527.117C608.36%20527.117%20555.972%20474.868%20555.972%20410.371V117.93Z%27%2F%3E%3Cpath%20d%3D%27M673.03%20234.676C737.679%20234.676%20790.087%20182.407%20790.087%20117.93C790.087%2053.4523%20737.679%201.18311%20673.03%201.18311C608.38%201.18311%20555.972%2053.4523%20555.972%20117.93C555.972%20182.407%20608.38%20234.676%20673.03%20234.676Z%27%2F%3E%3Cpath%20d%3D%27M966.248%20293.811V527.304H673.028C608.358%20527.304%20555.97%20475.055%20555.97%20410.557C555.97%20346.06%20608.358%20293.811%20673.028%20293.811H966.248Z%27%2F%3E%3Cpath%20d%3D%27M963.942%20527.112C1028.59%20527.112%201081%20474.843%201081%20410.365C1081%20345.888%201028.59%20293.619%20963.942%20293.619C899.293%20293.619%20846.884%20345.888%20846.884%20410.365C846.884%20474.843%20899.293%20527.112%20963.942%20527.112Z%27%2F%3E%3Cpath%20d%3D%27M963.947%20554.678V788.171H670.727C606.057%20788.171%20553.669%20735.923%20553.669%20671.425C553.669%20606.927%20606.057%20554.678%20670.727%20554.678H963.947Z%27%2F%3E%3Cpath%20d%3D%27M963.942%20788.171C1028.59%20788.171%201081%20735.902%201081%20671.425C1081%20606.948%201028.59%20554.678%20963.942%20554.678C899.293%20554.678%20846.884%20606.948%20846.884%20671.425C846.884%20735.902%20899.293%20788.171%20963.942%20788.171Z%27%2F%3E%3Cpath%20d%3D%27M787.784%20963.862H553.669V671.422C553.669%20606.924%20606.057%20554.676%20670.726%20554.676C735.396%20554.676%20787.784%20606.924%20787.784%20671.422V963.862Z%27%2F%3E%3Cpath%20d%3D%27M670.729%201078.32C735.378%201078.32%20787.787%201026.05%20787.787%20961.571C787.787%20897.094%20735.378%20844.825%20670.729%20844.825C606.08%20844.825%20553.671%20897.094%20553.671%20961.571C553.671%201026.05%20606.08%201078.32%20670.729%201078.32Z%27%2F%3E%3Cpath%20d%3D%27M528.531%20964.245H294.415V671.805C294.415%20607.307%20346.803%20555.058%20411.473%20555.058C476.143%20555.058%20528.531%20607.307%20528.531%20671.805V964.245Z%27%2F%3E%3Cpath%20d%3D%27M411.283%201081.18C475.933%201081.18%20528.341%201028.91%20528.341%20964.437C528.341%20899.96%20475.933%20847.69%20411.283%20847.69C346.634%20847.69%20294.226%20899.96%20294.226%20964.437C294.226%201028.91%20346.634%201081.18%20411.283%201081.18Z%27%2F%3E%3Cpath%20d%3D%27M118.255%20788.748L118.255%20555.255H411.475C476.145%20555.255%20528.533%20607.503%20528.533%20672.001C528.533%20736.499%20476.145%20788.748%20411.475%20788.748H118.255Z%27%2F%3E%3Cpath%20d%3D%27M120.36%20788.746C185.009%20788.746%20237.417%20736.477%20237.417%20672C237.417%20607.523%20185.009%20555.253%20120.36%20555.253C55.7103%20555.253%203.30176%20607.523%203.30176%20672C3.30176%20736.477%2055.7103%20788.746%20120.36%20788.746Z%27%2F%3E%3Cpath%20d%3D%27M118.063%20527.688L118.063%20294.195H411.283C475.953%20294.195%20528.341%20346.444%20528.341%20410.942C528.341%20475.439%20475.953%20527.688%20411.283%20527.688H118.063Z%27%2F%3E%3Cpath%20d%3D%27M118.058%20527.688C182.707%20527.688%20235.116%20475.419%20235.116%20410.941C235.116%20346.464%20182.707%20294.195%20118.058%20294.195C53.4086%20294.195%201%20346.464%201%20410.941C1%20475.419%2053.4086%20527.688%20118.058%20527.688Z%27%2F%3E%3Cpath%20d%3D%27M294.226%20118.505H528.341V410.946C528.341%20475.443%20475.953%20527.692%20411.283%20527.692C346.614%20527.692%20294.226%20475.443%20294.226%20410.946V118.505Z%27%2F%3E%3Cpath%20d%3D%27M411.283%20237.551C475.933%20237.551%20528.341%20185.282%20528.341%20120.805C528.341%2056.3277%20475.933%204.05853%20411.283%204.05853C346.634%204.05853%20294.226%2056.3277%20294.226%20120.805C294.226%20185.282%20346.634%20237.551%20411.283%20237.551Z%27%2F%3E%3C%2Fsvg%3E")}
/* ===================================================================
   profilr.eu — reconstruction du systeme observe sur le site en ligne.
   Rayons en 100 / 50 / 32 / 20 px, aplats de charte, une seule ombre,
   degrades qui s'evanouissent vers le blanc, titres en interlignage 1,0.
   =================================================================== */

:root{
  --sapin:#043428; --sapin-80:#224C42;
  --citron:#DFFFA5; --citron-pale:#FAFFF1;
  --dragee:#D9E5F4; --dragee-fonce:#BACDE4;
  --lin:#E0DAEE;    --lin-fonce:#C6BDDC;
  --menthe:#E4EAE8; --menthe-pale:#F0F3F3;
  --trait:#C3D0CC;
  --ombre:0 4px 10px rgba(0,0,0,.05);
  --display:'Clash Display','Figtree',-apple-system,BlinkMacSystemFont,sans-serif;
  --corps:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--corps);color:var(--sapin);background:#fff;font-size:16px;line-height:1.2;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--sapin);outline-offset:3px;border-radius:6px}

h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1}
h1{font-size:64px}
h2{font-size:48px}
h3{font-size:35.2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.lede{font-size:16px;line-height:1.2}
.muted{color:#3A5A50}

/* ---------- bouton signature : pilule sapin, point citron ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;background:var(--sapin);color:#fff;
  font-size:14px;font-weight:600;padding:15px 26px;border-radius:100px;transition:background .18s}
.btn::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--citron);flex:none}
.btn:hover{background:var(--sapin-80)}
.btn--citron{background:var(--citron);color:var(--sapin)}
.btn--citron::before{background:var(--sapin)}
.btn--citron:hover{background:#CFF391}

/* ---------- navigation : pilule flottante ---------- */
.nav{position:sticky;top:0;z-index:60;background:#fff;padding:18px 0}
.nav__in{max-width:1320px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:22px;
  letter-spacing:-.01em;min-height:44px}
.logo svg{width:26px;height:26px;flex:none}
.nav__menu{margin-left:auto;display:flex;gap:4px;background:var(--menthe-pale);border-radius:100px;padding:5px}
.nav__menu a{padding:10px 18px;border-radius:100px;font-size:15px;transition:background .15s}
.nav__menu a:hover{background:#fff}
.nav__end{display:flex;align-items:center;gap:14px}
.nav__avatar{width:42px;height:42px;border-radius:50%;background:var(--menthe);display:grid;place-items:center}
.lang{display:flex;gap:8px;font-size:13px;font-weight:600}
.lang :is(button,a){color:#8AA39A;padding:6px 4px;min-height:34px}
.lang :is(button,a).on{color:var(--sapin)}
.burger{display:none;width:44px;height:44px;border-radius:100px;background:var(--menthe-pale);
  align-items:center;justify-content:center}

/* ---------- le calque de trait, derive du logo ---------- */
.deco{position:relative;overflow:hidden}
.deco > *{position:relative;z-index:1}
.deco::before,.deco::after{content:"";position:absolute;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;opacity:.38}
.deco--l::before{width:900px;height:900px;left:-340px;top:-200px;background-image:var(--art-clover)}
.deco--r::after{width:980px;height:439px;right:-300px;bottom:-120px;background-image:var(--art-caps)}

/* ---------- emplacements a fournir ---------- */
.ph{position:relative;display:grid;place-items:center;background:var(--menthe-pale);
  border:2px dashed var(--trait);border-radius:20px;color:#6B8579;text-align:center;padding:24px}
.ph b{display:block;font-family:var(--corps);font-weight:600;font-size:15px;letter-spacing:.02em}
.ph span{display:block;font-size:12.5px;margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
.ph--rond{border-radius:50%}

/* ---------- hero ---------- */
.hero{padding:40px 0 0}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;min-height:560px}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:26px}
.hero__media{position:relative}
.hero__media::before{content:"";position:absolute;inset:-34% -24%;z-index:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(223,255,165,.92),rgba(223,255,165,.34) 44%,transparent 68%)}
.hero__video{position:relative;z-index:1;aspect-ratio:16/9;border-radius:20px}
.hero__note{text-align:center;max-width:760px;margin:70px auto 0;line-height:1.35;font-size:16px}
.hero__note b{font-weight:700}

/* ---------- section : rythme irregulier, comme en ligne ---------- */
.sec{position:relative}
.sec--proof{padding:96px 0 40px}
.sec--promise{padding:64px 0}
.sec--panel{padding:40px 0 90px}
.sec--integ{padding:320px 0 160px;text-align:center}
.sec--plans{padding:40px 0 100px}
.sec--wall{padding:80px 0 0}
.sec--quotes{padding:70px 0 90px}
.sec--contact{padding:90px 0 110px}

/* ---------- preuve : pilules a degrade + compteurs ---------- */
.sec--proof h2{text-align:center;margin-bottom:54px}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 58px}
.stat{text-align:center}
.stat b{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--corps);font-weight:500;
  font-size:30px;padding:16px 34px;border-radius:100px;min-width:150px;justify-content:center}
.stat:nth-child(1) b{background:linear-gradient(180deg,var(--sapin),rgba(4,52,40,.42));color:var(--citron)}
.stat:nth-child(2) b{background:linear-gradient(180deg,var(--citron),rgba(223,255,165,.25))}
.stat:nth-child(3) b{background:linear-gradient(180deg,var(--dragee),rgba(217,229,244,.25))}
.stat:nth-child(4) b{background:linear-gradient(180deg,var(--lin),rgba(224,218,238,.25))}
.stat span{display:block;margin-top:14px;font-size:13px;color:#4A6B62}
.marq{margin-top:64px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq__track{display:flex;gap:74px;align-items:center;width:max-content;animation:marq 42s linear infinite}
.marq img{height:44px;width:auto;flex:none;object-fit:contain;transition:.2s}
.marq img:hover{filter:none;opacity:1}
.marq__ph{flex:none;white-space:nowrap;background:var(--menthe-pale);border:2px dashed var(--trait);
  border-radius:100px;padding:11px 22px;font-size:13px;font-weight:600;color:#6B8579}
.marq:hover .marq__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- promesse ---------- */
.promise{display:grid;grid-template-columns:.85fr 1fr;gap:60px;align-items:center}
.promise__img{aspect-ratio:1;border-radius:20px}
.promise h3,.promise__h{margin-bottom:22px}
.promise__h{font-size:35.2px}
.promise p{margin-bottom:16px;line-height:1.35}
.toggles{display:grid;gap:14px;margin-top:26px}
.toggles li{display:flex;align-items:center;gap:14px;font-size:16px;font-weight:600;list-style:none}
.tg{width:40px;height:22px;border-radius:100px;flex:none;position:relative;
  box-shadow:inset 0 0 0 1px rgba(4,52,40,.12)}
.tg::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.tg--1{background:var(--sapin)} .tg--2{background:var(--citron)} .tg--3{background:var(--lin)}
.promise__cta{display:flex;justify-content:center;margin-top:56px}

/* ---------- panneau citron + illustration ---------- */
.panel{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.panel__acc{background:var(--citron);border-radius:50px;padding:54px 48px}
.acc__item.on .acc__item.on .panel__media{background:linear-gradient(158deg,var(--dragee),var(--lin));border-radius:50px;
  display:grid;place-items:center;padding:56px}
.panel__media .ph{width:100%;aspect-ratio:1;border-radius:32px;background:rgba(255,255,255,.55)}

/* ---------- integrations ---------- */
.sec--integ{background:radial-gradient(ellipse 70% 50% at 50% 42%,rgba(223,255,165,.4),transparent 68%)}
.sec--integ p{max-width:640px;margin:0 auto 8px;line-height:1.35}
.sec--integ .btn{margin-top:30px}
.tools{margin-top:76px;display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.tools .ph{width:120px;height:120px;border-radius:26px;background:#fff}

/* ---------- tarifs ---------- */
.sec--plans{background:linear-gradient(180deg,var(--citron-pale),#fff 62%)}
.sec--plans h2{text-align:center;margin-bottom:34px}
.bill{display:flex;justify-content:center;margin-bottom:46px}
.bill__in{display:flex;gap:4px;background:#fff;border-radius:100px;padding:5px;box-shadow:var(--ombre)}
.bill button{padding:11px 22px;border-radius:100px;font-size:14px;font-weight:600;color:#8AA39A}
.bill button.on{background:var(--citron);color:var(--sapin)}
@media (max-width:400px){.bill__in{max-width:100%;flex-wrap:wrap;justify-content:center}.bill button{padding:10px 14px;font-size:13px}}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.plan{background:#fff;border-radius:32px;padding:34px 30px 38px}
.plan--hi{background:linear-gradient(180deg,var(--citron-pale),#fff)}
.chip{display:inline-flex;align-items:center;gap:9px;font-family:var(--corps);font-weight:500;font-size:16px;
  padding:9px 18px;border-radius:100px;color:#fff;
  background:linear-gradient(180deg,rgba(4,52,40,.92),rgba(4,52,40,.58))}
.plan__price{font-family:var(--corps);font-weight:500;font-size:40px;margin:22px 0 4px}
.plan__unit{font-size:13px;color:#4A6B62}
.plan .btn{width:100%;justify-content:center;margin:22px 0 26px}
.plan__tag{font-size:12px;font-weight:700;letter-spacing:.03em;margin-bottom:18px}
.plan ul{display:grid;gap:12px}
.plan li{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;font-size:13.5px;
  line-height:1.3;list-style:none;color:#26433B}
.orb{width:11px;height:11px;border-radius:50%;flex:none;margin-top:2px;
  background:radial-gradient(circle at 32% 30%,#fff,#9FB3AC 62%,#6E837C)}

/* ---------- mur de pilules (Matter.js) ---------- */
.sec--wall h2{text-align:center}
.wall{position:relative;height:420px;margin-top:10px}
.wall canvas{display:block}
.wall__fallback{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding-top:40px}
.wall__fallback span{background:var(--menthe);border-radius:100px;padding:12px 22px;font-size:14px;font-weight:600}

/* ---------- temoignages : cartes en onglet de dossier ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{position:relative;margin-top:26px;background:var(--menthe-pale);border-radius:28px;
  padding:0 30px 34px;display:flex;flex-direction:column}
.quote::before{content:"";position:absolute;top:-24px;left:0;width:62%;height:48px;
  border-radius:28px 28px 0 0;background:var(--menthe-pale);z-index:-1}
.quote__av{width:96px;height:96px;margin:-30px auto 22px;position:relative;z-index:1}
.quote p{font-size:14.5px;line-height:1.45;text-align:center;color:#26433B}
.quote footer{margin-top:auto;padding-top:20px;text-align:center}
.quote b{display:block;font-size:14px;font-weight:700}
.quote span{font-size:13px;color:#4A6B62}
.qnav{display:flex;justify-content:center;gap:14px;margin-top:38px}
.qnav button{width:52px;height:52px;border-radius:50%;background:var(--menthe-pale);display:grid;place-items:center}
.qnav button:hover{background:var(--menthe)}

/* ---------- reservation ---------- */
.sec--contact h2{text-align:center;margin-bottom:40px}
.sec--contact .ph{height:520px;border-radius:32px}

/* ---------- FAQ : panneau dragee a coins hauts ---------- */
.faq{background:var(--dragee);border-radius:100px 100px 0 0;padding:100px 0 110px;margin-top:40px}
.faq h2{text-align:center;margin-bottom:46px}
.faq__list{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border-radius:100px;padding:6px 30px;transition:border-radius .2s}
.faq details[open]{border-radius:32px;padding-bottom:10px}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-size:15px;font-weight:700;
  display:flex;justify-content:space-between;align-items:center;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";width:32px;height:32px;border-radius:50%;background:var(--menthe-pale);
  display:grid;place-items:center;font-size:19px;font-weight:400;flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;font-size:14.5px;line-height:1.45;color:#26433B}
.faq__all{display:flex;justify-content:center;margin-top:34px}

/* ---------- pied ---------- */
.foot{background:var(--sapin);color:#A6BDB4;border-radius:100px 100px 0 0;padding:86px 0 34px;font-size:14px}
.foot__logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:600;font-size:34px;
  background:linear-gradient(120deg,var(--citron),#8FCF7E);-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:22px}
.foot__logo svg{width:34px;height:34px;flex:none}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.foot h4,.foot .ft__t{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:600}
.foot a{display:block;padding:7px 0;transition:color .15s}
.foot a:hover{color:var(--citron)}
.foot__sub{display:flex;gap:10px;margin:8px 0 26px;flex-wrap:wrap}
.foot__sub input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:100px;
  padding:13px 20px;color:#fff;font:inherit;font-size:14px;min-width:220px;flex:1}
.foot__sub input::placeholder{color:#7F9A90}
/* inscription à la newsletter (assets/newsletter.js) : mention RGPD et message de retour sous le champ */
.foot__rgpd,.foot__etat{flex:1 0 100%;font-size:13px;line-height:1.45}
.foot__rgpd{color:#7F9A90}
.foot__rgpd a{display:inline;padding:0;color:inherit;text-decoration:underline}
.foot__etat{font-weight:600;color:var(--citron)}
.foot__etat:empty{display:none}
.foot__etat--erreur{color:#FFB4A8}
.foot__sub .btn[disabled]{opacity:.6;cursor:progress}
.foot__follow{font-family:var(--corps);font-weight:500;font-size:22px;color:#fff;margin-top:26px}
.foot__bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px}
.foot__bottom a{display:inline;padding:0}
.foot__legal{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- reveal au scroll ---------- */
.rv{opacity:0;transform:translateY(18px)}
.rv.on{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.22,.7,.3,1)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  h1{font-size:44px} h2{font-size:34px} h3{font-size:27px} .promise__h{font-size:27px}
  .nav__menu{display:none} .burger{display:flex} .nav__end .lang{display:flex}
  .hero__grid,.promise,.panel{grid-template-columns:1fr}
  .hero__grid{gap:34px;min-height:0}
  .hero__media{order:-1}
  .hero h1,.hero .lede{text-align:center} .hero .btn{margin:0 auto}
  .hero__grid > div{display:flex;flex-direction:column;align-items:center}
  .plans,.quotes{grid-template-columns:1fr}
  .sec--integ{padding:120px 0 90px}
  .foot__grid{grid-template-columns:1fr;gap:34px}
  .faq,.foot{border-radius:52px 52px 0 0}
  .panel__acc,.panel__media{border-radius:32px;padding:32px 26px}
  .stat b{font-size:24px;min-width:0;padding:14px 24px}
}
@media (max-width:560px){
  h1{font-size:38px}
  .stats{gap:26px 30px}
  .stat{width:calc(50% - 16px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ===================== blog ===================== */
.bl{padding:56px 0 110px}
.bl__h1{font-size:44px;max-width:16ch;margin-bottom:38px}
.bl__tools{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:44px}
.bl__search{flex:1;min-width:240px;background:var(--menthe-pale);border:none;border-radius:100px;
  padding:15px 24px;font:inherit;font-size:15px;color:var(--sapin)}
.bl__search::placeholder{color:#8AA39A}
.bl__cats{display:flex;flex-wrap:wrap;gap:8px}
.bl__cats button{padding:10px 18px;border-radius:100px;font-size:13.5px;font-weight:600;
  background:var(--menthe-pale);color:#4A6B62;transition:.15s}
.bl__cats button:hover{background:var(--menthe)}
.bl__cats button.on{background:var(--sapin);color:var(--citron)}
.bl__label{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#4A6B62;margin-bottom:16px}
.bl__card{display:block;background:var(--menthe-pale);border-radius:32px;overflow:hidden;transition:.2s}
.bl__card:hover{transform:translateY(-3px)}
.bl__card.is-off{display:none}
.bl__img{aspect-ratio:16/9;border-radius:0;border:none;border-bottom:2px dashed var(--trait)}
.bl__body{padding:24px 26px 28px}
.bl__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.bl__tag{font-size:12px;font-weight:600;padding:6px 13px;border-radius:100px;background:var(--dragee);color:#1D3D5C}
.bl__meta time{font-size:12.5px;color:#4A6B62;margin-left:auto}
.bl__card h2{font-size:21px;line-height:1.2;margin-bottom:16px}
.bl__more{font-size:13.5px;font-weight:600;color:var(--sapin)}
.bl__card--big{background:var(--citron);margin-bottom:46px}
.bl__card--big .bl__img{aspect-ratio:auto;height:320px}
.bl__card--big h2{font-size:32px}
.bl__card--big .bl__tag{background:rgba(255,255,255,.72)}
.bl__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bl__all{display:flex;justify-content:center;margin-top:52px}
.bl__empty{text-align:center;color:#4A6B62;padding:40px 0;font-size:15px}
@media (max-width:980px){
  .bl__h1{font-size:32px}
  .bl__grid{grid-template-columns:1fr 1fr}
  .bl__card--big h2{font-size:24px}
}
@media (max-width:640px){.bl__grid{grid-template-columns:1fr}}

/* ===================== article ===================== */
.ar{padding:40px 0 100px}
.ar__head{max-width:820px}
.ar__crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:#4A6B62;margin-bottom:26px}
.ar__crumb a:hover{color:var(--sapin);text-decoration:underline}
.ar__cats{margin-bottom:18px}
.ar h1{font-size:46px;line-height:1.05;margin-bottom:22px}
.ar__chapo{font-size:19px;line-height:1.5;color:#3A5A50;margin-bottom:30px}
.ar__by{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:13.5px;
  padding-bottom:34px;border-bottom:1px solid var(--menthe)}
.ar__av{width:44px;height:44px;border-radius:50%;background:var(--sapin);color:var(--citron);
  display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.ar__av--big{width:62px;height:62px;font-size:18px}
.ar__by b{display:block;font-weight:700}
.ar__by i{font-style:normal;color:#4A6B62}
.ar__dates{margin-left:auto;color:#4A6B62;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.ar__dates em{font-style:normal}
.ar__hero{aspect-ratio:16/9;border-radius:32px;margin:40px 0 46px}
.ar__grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start}
.ar__toc{position:sticky;top:104px;font-size:13.5px}
.ar__toc-t{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#4A6B62;margin-bottom:14px}
.ar__toc ol{list-style:none;counter-reset:t;display:grid;gap:10px}
.ar__toc li{counter-increment:t;line-height:1.35}
.ar__toc a{color:#3A5A50;display:block;padding-left:22px;position:relative}
.ar__toc a::before{content:counter(t);position:absolute;left:0;font-weight:700;color:#8AA39A}
.ar__toc a:hover{color:var(--sapin)}
.ar__body{max-width:68ch;font-size:17px;line-height:1.68;color:#1F3A32}
.ar__body h2{font-size:30px;line-height:1.15;margin:52px 0 18px;scroll-margin-top:110px}
.ar__body h3{font-size:22px;line-height:1.2;margin:36px 0 14px;scroll-margin-top:110px}
.ar__body p{margin-bottom:18px}
.ar__list{display:grid;gap:11px;margin:0 0 22px;padding-left:0;list-style:none}
.ar__list li{position:relative;padding-left:26px}
.ar__list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--citron);box-shadow:inset 0 0 0 1px rgba(4,52,40,.22)}
.ar__answer{background:var(--citron);border-radius:24px;padding:26px 30px;margin-bottom:40px}
.ar__answer p{margin:0;font-size:17px;line-height:1.55;font-weight:500}
.ar__key{background:var(--dragee);border-radius:24px;padding:24px 28px;margin:32px 0}
.ar__key p{margin:0;font-size:16px;line-height:1.55}
.ar__faq{margin-top:56px}
.ar__faq h2{margin-top:0}
.ar__faq details{background:var(--menthe-pale);border-radius:20px;padding:4px 24px;margin-bottom:10px}
.ar__faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;font-size:16px;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.ar__faq summary::-webkit-details-marker{display:none}
.ar__faq summary::after{content:"+";width:28px;height:28px;border-radius:50%;background:#fff;
  display:grid;place-items:center;font-weight:400;font-size:17px;flex:none;transition:transform .2s}
.ar__faq details[open] summary::after{transform:rotate(45deg)}
.ar__faq details p{padding:0 0 18px;font-size:15.5px;line-height:1.55;margin:0}
.ar__author{display:flex;gap:18px;align-items:flex-start;background:var(--menthe-pale);
  border-radius:24px;padding:26px 28px;margin-top:52px}
.ar__author b{display:block;font-size:15px}
.ar__author i{font-style:normal;font-size:14px;color:#4A6B62}
.ar__author p{margin:10px 0 0;font-size:15px;line-height:1.5}
.ar__cta{background:var(--sapin);color:#fff;border-radius:32px;padding:38px 34px;margin-top:40px;
  text-align:center}
.ar__cta p{font-family:var(--corps);font-weight:500;font-size:24px;line-height:1.2;margin-bottom:22px}
.ar__cta .btn{background:var(--citron);color:var(--sapin)}
.ar__cta .btn::before{background:var(--sapin)}
.ar__related{margin-top:80px;padding-top:44px;border-top:1px solid var(--menthe)}
.ar__related h2{font-size:28px;margin-bottom:26px}
.ar__rels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ar__rel{display:block;background:var(--menthe-pale);border-radius:24px;padding:24px 26px;transition:.2s}
.ar__rel:hover{transform:translateY(-3px)}
.ar__rel-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#4A6B62;margin-bottom:10px}
.ar__rel-t{font-family:var(--corps);font-weight:500;font-size:19px;line-height:1.2}
@media (max-width:980px){
  .ar h1{font-size:32px}
  .ar__grid{grid-template-columns:1fr;gap:32px}
  .ar__toc{position:static;background:var(--menthe-pale);border-radius:20px;padding:20px 22px}
  .ar__body{font-size:16.5px}
  .ar__body h2{font-size:25px;margin-top:40px}
  .ar__rels{grid-template-columns:1fr}
  .ar__dates{margin-left:0;width:100%}
}

/* =========================================================================
   PAGE TARIFS
   Grille du 26 septembre 2026. Les quotas non valides ne sont pas affiches.
   ========================================================================= */
.sec--pr-head{padding:64px 0 24px}
.pr__h1{font-size:64px;line-height:1;text-align:center;margin-bottom:22px}
.pr__lede{max-width:720px;margin:0 auto 38px;text-align:center;font-size:18px;line-height:1.45}
.pr__ht{text-align:center;margin-top:26px;font-size:14px}

.plans--4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.plans--4 .plan{display:flex;flex-direction:column;padding:30px 26px 32px;border-radius:32px;
  background:var(--menthe-pale);box-shadow:none}
.plans--4 .plan--hi{background:var(--sapin);color:#fff}
.plans--4 .plan--hi .chip{background:rgba(255,255,255,.14);color:#DFFFA5}
.plans--4 .plan--hi .plan__who,.plans--4 .plan--hi .plan__tag{color:#B6D0C4}
.plans--4 .plan--hi .plan__unit{color:#9FC4B4}
.plans--4 .plan--hi li span:first-child{color:#E6EFEB}
.plan__who{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#6C8C80;margin:14px 0 6px}
.plans--4 .plan__price{font-family:var(--corps);font-weight:500;font-size:44px;line-height:1.05;
  margin-bottom:20px;white-space:nowrap}
.plans--4 .plan__price--fix{font-size:30px}
.plans--4 .plan__unit{font-family:var(--corps);font-size:14px;font-weight:600;color:#6C8C80;
  display:block;white-space:normal;margin-top:4px}
.plans--4 .plan__tag{font-size:14px;line-height:1.4;color:#4A6B60;margin:18px 0 16px;
  text-transform:none;letter-spacing:0;font-weight:500}
.plans--4 .plan ul{margin-top:auto;display:flex;flex-direction:column;gap:11px}
.plans--4 .plan li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  font-size:14px;line-height:1.35}

/* packs */
.sec--packs{padding:80px 0}
.pk__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.pk__box{background:var(--dragee);border-radius:32px;padding:30px 30px 22px}
.pk__box:last-child{background:var(--lin)}
.pk__box h3{font-size:24px;margin-bottom:16px}
.pk{width:100%;border-collapse:collapse;font-size:15px}
.pk th{text-align:left;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:#4A6B60;padding:0 0 10px;font-weight:600}
.pk td{padding:11px 0;border-top:1px solid rgba(4,52,40,.12);font-variant-numeric:tabular-nums}
.pk td:first-child{font-weight:600}
.pk th:not(:first-child),.pk td:not(:first-child){text-align:right}

/* matrice */
.sec--matrix{padding:20px 0 90px}
.mx__scroll{overflow-x:auto;border-radius:28px;background:var(--menthe-pale);padding:6px 4px 4px}
.mx{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.mx thead th{position:sticky;top:0;background:var(--menthe-pale);padding:16px 14px;
  font-size:15px;font-weight:700;text-align:center}
.mx thead th:first-child{text-align:left;width:34%}
.mx th,.mx td{padding:11px 14px}
.mx tbody th{text-align:left;font-weight:500;line-height:1.3}
.mx td{text-align:center;color:#3A5A50}
.mx tbody tr:not(.mx__cat){border-top:1px solid rgba(4,52,40,.08)}
.mx__cat th{font-family:var(--corps);font-weight:500;font-size:19px;
  padding:26px 14px 10px;color:var(--sapin)}
.mx__soon{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:100px;
  background:var(--lin);font-size:11px;font-weight:600;letter-spacing:.04em;vertical-align:1px}

/* appel final */
.sec--prcta{padding:0 0 100px}
.prcta{background:var(--sapin);color:#fff;border-radius:52px;padding:64px 40px;text-align:center}
.prcta h2{color:#fff;margin-bottom:28px}
.prcta .btn{margin:0 auto}

@media (max-width:1080px){
  .plans--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .pr__h1{font-size:40px}
  .pk__grid{grid-template-columns:1fr}
  .sec--pr-head{padding-top:36px}
}
@media (max-width:620px){
  .plans--4{grid-template-columns:1fr}
  .prcta{padding:44px 22px;border-radius:32px}
}

/* --- vrai logo (profilrcitron.svg, recupere le 23 septembre) --- */
.logo{width:118px;height:31px;background:url(/assets/img/logo.svg) left center/contain no-repeat;
  font-size:0;flex:none;display:block}
.foot__logo{width:160px;height:42px;background:url(/assets/img/foot-logo.svg) left center/contain no-repeat;
  font-size:0;display:block;margin-bottom:18px}
.foot__logo svg{display:none}
.foot__sub{align-items:center}
.foot__sub input{flex:1 1 auto;min-width:0;max-width:340px}
.foot__sub .btn{flex:0 0 auto;white-space:nowrap;padding:13px 24px}
@media (max-width:420px){.logo{width:94px;height:25px}.nav__in{padding:0 18px;gap:12px}}

/* --- corrections page Tarifs --- */
.plans--4 .chip{background:none;padding:0;font-size:22px;color:var(--sapin)}
.plans--4 .plan--hi .chip{background:none;color:#fff}
.plans--4 .plan__tag{min-height:4.2em}
.plans--4 .plan .btn{width:100%;justify-content:center}

.sec--packs h2,.sec--matrix h2{text-align:center;margin-bottom:16px}
.pk td{white-space:nowrap}

.plans__all{display:flex;justify-content:center;margin-top:34px}
.sec--plans .pr__ht{margin-top:24px}

/* --- trois cartes en colonnes, Enterprise en bandeau --- */
.plans--3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plans--3 .plan{display:flex;flex-direction:column;padding:32px 28px 34px;border-radius:32px;
  background:var(--menthe-pale);box-shadow:none}
.plans--3 .plan--hi{background:var(--sapin);color:#fff}
.plans--3 .plan--hi .chip{background:none;color:#fff}
.plans--3 .plan--hi .plan__who,.plans--3 .plan--hi .plan__tag{color:#B6D0C4}
.plans--3 .plan--hi .plan__unit{color:#9FC4B4}
.plans--3 .plan--hi li span{color:#E6EFEB}
.plans--3 .chip{background:none;padding:0;font-size:23px;color:var(--sapin)}
.plans--3 .plan__price{font-family:var(--corps);font-weight:500;font-size:50px;line-height:1.05;
  margin-bottom:22px;white-space:nowrap}
.plans--3 .plan__unit{font-family:var(--corps);font-size:14px;font-weight:600;color:#6C8C80;
  display:block;white-space:normal;margin-top:4px}
.plans--3 .plan__tag{font-size:14px;line-height:1.4;color:#4A6B60;margin:18px 0 16px;
  text-transform:none;letter-spacing:0;font-weight:500;min-height:4.2em}
.plans--3 .plan .btn{width:100%;justify-content:center}
.plans--3 .plan ul{margin-top:auto;display:flex;flex-direction:column;gap:11px}
.plans--3 .plan li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  font-size:14px;line-height:1.35}

.entb{display:grid;grid-template-columns:1.05fr 1.15fr auto;gap:40px;align-items:center;
  margin-top:20px;padding:34px 38px;border-radius:32px;
  background:var(--dragee)}
.entb__left .chip{background:none;padding:0;font-size:23px;color:var(--sapin)}
.entb__price{font-family:var(--corps);font-weight:500;font-size:30px;margin:10px 0 8px}
.entb__tag{font-size:14px;line-height:1.45;color:#3A5A50}
.entb__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 24px;font-size:14px}
.entb__list li{position:relative;padding-left:17px;line-height:1.35}
.entb__list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--sapin);opacity:.45}
.entb__cta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.entb__who{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#4A6B60;font-weight:600}

@media (max-width:1080px){
  .plans--3{grid-template-columns:1fr}
  .entb{grid-template-columns:1fr;gap:24px;text-align:left}
  .entb__cta{align-items:flex-start}
}
@media (max-width:620px){
  .entb{padding:28px 22px}
  .entb__list{grid-template-columns:1fr}
}

.plans--3 .plan__price--fix{font-size:31px;line-height:1.15;white-space:normal}

/* =========================================================================
   TRUST CENTER — contenus de la maquette, codes graphiques de Draft 2
   ========================================================================= */
.tc__hero{background:var(--sapin);color:#fff;border-radius:0 0 100px 100px;
  padding:64px 0 76px;position:relative;overflow:hidden}
.tc__hero::before{content:"";position:absolute;width:640px;height:640px;right:-190px;top:-180px;
  background:var(--art-clover);background-size:contain;background-repeat:no-repeat;
  opacity:.16;transform:rotate(-12deg);pointer-events:none}
.tc__hero .wrap{position:relative;z-index:1;max-width:900px}
.tc__hero h1{color:#fff;font-size:72px;line-height:1;margin:22px 0 16px}
.tc__sub{font-size:24px;line-height:1.3;color:var(--citron);font-weight:600;margin-bottom:18px}
.tc__lede{font-size:17px;line-height:1.55;color:#B6D0C4;max-width:68ch;margin-bottom:30px}
.tc__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}
.btn--ligne{background:none;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.btn--ligne::before{background:var(--citron)}
.btn--ligne:hover{background:rgba(255,255,255,.08)}
.tc__badges{display:flex;flex-wrap:wrap;gap:9px}
.tc__badge{padding:8px 15px;border-radius:100px;background:rgba(217,229,244,.12);
  color:#D9E5F4;font-size:13.5px;font-weight:600}

.tc__eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#6C8C80;margin-bottom:12px}
.tc__eyebrow--hero,.tc__eyebrow--dark{padding:7px 16px;border-radius:100px;
  background:rgba(223,255,165,.16);color:var(--citron);letter-spacing:.1em;margin-bottom:0}
.sec--tc{padding:56px 0}
.sec--tc h2{font-size:36px;margin-bottom:14px}
.tc__note{max-width:72ch;font-size:16px;line-height:1.55;margin-bottom:28px}

.tc__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.tc__stat{background:var(--menthe-pale);border-radius:24px;padding:24px 26px}
.tc__stat span{display:block;font-size:13px;font-weight:600;color:#4A6B60;margin-bottom:8px}
.tc__stat b{font-family:var(--corps);font-weight:500;font-size:28px}

.tc__form{background:var(--dragee);border-radius:36px;padding:38px 40px 42px;max-width:860px}
.tc__form form{display:grid;gap:16px}
.tc__form form[hidden]{display:none}
.tc__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tc__form label{display:grid;gap:7px;font-size:14px;font-weight:600}
.tc__form input,.tc__form select,.tc__form textarea{font:inherit;font-weight:400;font-size:15px;
  padding:13px 16px;border-radius:14px;border:1.5px solid rgba(4,52,40,.14);background:#fff;
  color:var(--sapin);width:100%}
.tc__form textarea{resize:vertical}
.tc__form .btn{justify-self:start;margin-top:4px}
.tc__form .btn[disabled]{opacity:.6;cursor:progress}
/* champ piège pour les robots : hors écran, ignoré des lecteurs d'écran et du clavier */
.tc__form .tc__piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.tc__err{margin:0;font-size:14px;font-weight:600;color:#A33A2B}
.tc__err a{color:inherit;text-decoration:underline}
.tc__ok{text-align:center;padding:26px 0 8px}
.tc__ok h3{font-size:26px;margin-bottom:10px}
.tc__ok p{font-size:15.5px;line-height:1.55;color:#3A5A50;max-width:52ch;margin:0 auto 22px}
.tc__ok .btn{margin:0 auto}
.btn--ghost{background:none;color:var(--sapin);box-shadow:inset 0 0 0 1.5px rgba(4,52,40,.18)}
.btn--ghost::before{background:var(--sapin)}
.btn--ghost:hover{background:rgba(4,52,40,.05)}

.tc__docs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tc__doc{display:flex;align-items:center;justify-content:space-between;gap:22px;
  background:var(--menthe-pale);border-radius:24px;padding:22px 26px}
.tc__doc h3{font-size:17px;margin-bottom:5px;line-height:1.25}
.tc__doc p{font-size:13.5px;line-height:1.4;color:#4A6B60}
.tc__doc .btn{flex:none;padding:9px 18px;font-size:14px}

.sec--tcdark{padding:20px 0 56px}
.tcdark{position:relative;overflow:hidden;background:var(--sapin);color:#fff;
  border-radius:52px;padding:52px 48px 54px}
.tcdark::before{content:"";position:absolute;width:560px;height:560px;left:-190px;bottom:-260px;
  background:var(--art-clover);background-size:contain;background-repeat:no-repeat;
  opacity:.14;transform:rotate(18deg);pointer-events:none}
.tcdark > *{position:relative;z-index:1}
.tcdark h2{color:#fff;font-size:36px;margin:14px 0 12px}
.tcdark__lede{color:#B6D0C4;font-size:16px;line-height:1.55;max-width:70ch;margin-bottom:28px}
.tc__mesures{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tc__mesures li{position:relative;padding:14px 16px 14px 34px;border-radius:16px;
  background:rgba(255,255,255,.07);font-size:14px;line-height:1.3}
.tc__mesures li::before{content:"";position:absolute;left:14px;top:19px;width:8px;height:8px;
  border-radius:50%;background:var(--citron)}

.tc__ais{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tc__ai{border-left:3px solid var(--citron);padding:4px 0 4px 20px}
.tc__ai h3{font-size:19px;margin-bottom:6px}
.tc__ai p{font-size:15px;line-height:1.5;color:#3A5A50}

.tc__contact{background:var(--lin);border-radius:36px;padding:44px 44px 48px;text-align:center}
.tc__contact .tc__note{margin:0 auto 20px}
.tc__mail{font-family:var(--corps);font-weight:500;font-size:30px;margin-bottom:22px}
.tc__mail a{text-decoration:none}
.tc__contact .btn{margin:0 auto}
.tc__legal{text-align:center;font-size:13px;margin-top:26px}

@media (max-width:900px){
  .tc__hero{border-radius:0 0 52px 52px;padding:44px 0 56px}
  .tc__hero h1{font-size:46px}
  .tc__sub{font-size:20px}
  .sec--tc h2,.tcdark h2{font-size:28px}
  .tc__stats{grid-template-columns:1fr 1fr}
  .tc__mesures{grid-template-columns:1fr 1fr}
  .tc__docs,.tc__ais{grid-template-columns:1fr}
  .tcdark{padding:36px 24px 40px;border-radius:32px}
  .tc__form{padding:28px 24px 32px;border-radius:28px}
  .tc__contact{padding:34px 24px 38px;border-radius:28px}
}
@media (max-width:560px){
  .tc__row{grid-template-columns:1fr}
  .tc__stats,.tc__mesures{grid-template-columns:1fr}
  .tc__doc{flex-direction:column;align-items:flex-start;gap:14px}
  .tc__mail{font-size:22px}
}

/* --- connexion : un mot plutot qu'une icone, pour qu'on la trouve --- */
.nav__login{display:inline-flex;align-items:center;padding:10px 20px;border-radius:100px;
  font-size:15px;font-weight:600;color:var(--sapin);text-decoration:none;
  box-shadow:inset 0 0 0 1.5px rgba(4,52,40,.18);transition:background .15s,box-shadow .15s}
.nav__login:hover{background:var(--menthe-pale);box-shadow:inset 0 0 0 1.5px rgba(4,52,40,.3)}
/* sur le haut de page sombre de Draft 3, le contour s'inverse */
.nav--dark .nav__login,.page .nav__login{}
@media (max-width:760px){.nav__login{padding:9px 15px;font-size:14px}}
@media (max-width:460px){
  /* sous 460 px la barre est saturee : la connexion garde son mot mais perd
     son contour et son rembourrage, sinon elle pousse tout hors de l'ecran */
  .nav__login{padding:6px 6px;font-size:13.5px;box-shadow:none}
  .nav__login:hover{background:none;box-shadow:none}
  .nav__end{gap:8px}
  .lang{gap:0}
  .lang :is(button,a){padding:6px 3px}
}

/* =========================================================================
   LES CINQ ETAPES — PAQUET DE CARTES, GLISSEMENT LATERAL
   La carte est quasi plein ecran. Son contenu est dimensionne en unites
   fluides : quand la carte grandit, le titre, les lignes et l'illustration
   grandissent avec elle. C'est ce qui evite le vide.
   Composition editoriale : titre en haut, lignes en bas, illustration sur
   toute la hauteur a droite — le contenu tient les quatre coins.
   ========================================================================= */
.sec--panel{padding:40px 0 0;overflow-x:clip}
.deck{position:relative}
.deck__pin{position:sticky;top:96px;height:calc(100svh - 120px);min-height:520px;
  margin:0 32px}

.dcard{position:absolute;inset:0;border-radius:48px;overflow:hidden;
  will-change:transform;backface-visibility:hidden;
  box-shadow:-30px 0 70px rgba(4,52,40,.16),0 12px 44px rgba(4,52,40,.06)}
/* Le trefle du logo, agrandi, occupe le creux entre le titre et les lignes.
   Meme geste que le hero et la banniere LinkedIn : c'est la geometrie de la
   marque qui meuble, pas un ornement rapporte. */
.dcard::before{content:"";position:absolute;left:-8%;bottom:-26%;
  width:min(58%,62vh);aspect-ratio:1;pointer-events:none;
  background:var(--art-trefle);background-size:contain;background-repeat:no-repeat;
  opacity:.14;transform:rotate(-14deg)}
/* sur fond sapin le trace passe en blanc, sinon il se confond avec le fond */
.dcard--sapin::before{filter:brightness(0) invert(1);opacity:.20}
.dcard__in{position:relative;z-index:1}

.dcard--citron{background:var(--citron)}
.dcard--dragee{background:var(--dragee)}
.dcard--lin{background:var(--lin)}
.dcard--menthe{background:var(--menthe)}
.dcard--sapin{background:var(--sapin);color:#fff}

/* --- grille interne --------------------------------------------------- */
.dcard__in{height:100%;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,3.4vw,72px);
  padding:clamp(34px,3.6vw,64px)}

/* le texte occupe toute la hauteur : entete collee en haut, lignes en bas */
.dcard__txt{display:flex;flex-direction:column;justify-content:space-between;
  min-width:0;position:relative;z-index:1}
.dcard__n{font-family:var(--corps);font-weight:500;display:block;
  font-size:clamp(14px,1.15vw,24px);letter-spacing:.07em;margin-bottom:clamp(12px,1.2vw,24px);opacity:.5}
.dcard h3{font-family:var(--display);font-weight:500;line-height:.92;
  font-size:clamp(42px,7vw,150px);letter-spacing:-.034em;margin:0;
  overflow-wrap:break-word}   /* garde-fou : un mot long ne deborde jamais */
.dcard ul{flex:1;display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(18px,3vh,56px);list-style:none;margin:clamp(30px,4.5vh,72px) 0 0}
.dcard li{display:flex;gap:clamp(11px,1vw,18px);align-items:flex-start;
  font-size:clamp(18px,2.2vw,40px);line-height:1.26;max-width:27em}
.dcard .tg{width:clamp(36px,3.4vw,62px);height:clamp(20px,1.9vw,35px);flex:none;margin-top:.1em}
.dcard .tg::after{width:clamp(14px,1.3vw,25px);height:clamp(14px,1.3vw,25px)}
/* sur fond sapin, les bascules doivent rester lisibles */
.dcard--sapin .tg{background:rgba(255,255,255,.26)}
.dcard--sapin .tg::after{background:#fff}
.dcard--sapin .tg--1{background:var(--citron)}
.dcard--sapin .tg--1::after{background:var(--sapin)}

/* l'illustration prend toute la hauteur disponible et reste carree */
.dcard__media{min-width:0;display:grid;place-items:center}
.dcard__media .ph{height:100%;aspect-ratio:1;width:auto;max-width:100%;
  border-radius:clamp(22px,2.2vw,40px);
  background:rgba(255,255,255,.5);border-color:rgba(4,52,40,.16)}
.dcard--sapin .dcard__media .ph{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.dcard--sapin .ph__i{color:#9FC4B4}

/* --- ecrans etroits ---------------------------------------------------- */
@media (max-width:900px){
  /* figer la scene sur un telephone rend le defilement incontrolable :
     les cartes redeviennent une liste, dans l'ordre */
  .deck{height:auto !important}
  .deck__pin{position:static;height:auto;min-height:0;display:grid;gap:16px;margin:0 20px}
  .dcard{position:static;transform:none !important;border-radius:32px;
    box-shadow:var(--ombre)}
  .dcard__in{grid-template-columns:1fr;padding:32px 26px 34px;gap:26px}
  .dcard__txt{gap:22px;max-width:none}
  .dcard h3{font-size:30px}
  .dcard li{font-size:16px}
  .dcard__media .ph{height:auto;width:100%;aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){
  .deck{height:auto !important}
  .deck__pin{position:static;height:auto;min-height:0;display:grid;gap:18px}
  .dcard{position:static;transform:none !important}
}

/* --- section integrations : meme echelle fluide que les cartes ---------
   Le titre et les deux phrases etaient figes a 48 et 16 px, donc minuscules
   dans une section qui occupe tout l'ecran. Tout devient fluide, et les
   vignettes d'outils grandissent avec. */
.sec--integ h2{font-size:clamp(32px,3.9vw,72px);line-height:1;letter-spacing:-.028em;
  margin-bottom:clamp(20px,2.2vw,40px)}
.sec--integ p{max-width:44ch;margin:0 auto clamp(12px,1vw,20px);
  font-size:clamp(16px,1.35vw,25px);line-height:1.45}
.sec--integ .btn{margin-top:clamp(28px,3vw,54px);
  padding:clamp(13px,1.15vw,20px) clamp(24px,2.1vw,38px);font-size:clamp(15px,1.15vw,21px)}
.tools{margin-top:clamp(56px,6vw,110px);gap:clamp(16px,1.7vw,30px)}
.tools .ph{width:clamp(96px,9.4vw,176px);height:clamp(96px,9.4vw,176px);
  border-radius:clamp(20px,2vw,36px)}
@media (max-width:900px){
  .sec--integ p{max-width:30ch}
}

/* --- bandeaux d'outils : deux pistes qui defilent en sens contraire ------
   La piste contient deux fois les memes vignettes et se deplace de la moitie
   de sa largeur : au terme du cycle l'image est identique, la boucle ne se
   voit pas. Un masque estompe les deux bords pour que rien n'apparaisse ou
   ne disparaisse brutalement. */
.tools{display:grid;gap:clamp(14px,1.5vw,26px);margin-top:clamp(56px,6vw,110px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tools__row{overflow:hidden}
/* l'ecart est porte par les vignettes, pas par un gap de flex :
   la piste fait alors exactement 4 copies, et un deplacement du
   quart de sa largeur retombe pile sur la copie suivante */
.tools__track{display:flex;width:max-content}
.tools .ph{margin-right:clamp(14px,1.5vw,26px)}
.tools__track--g{animation:def-gauche 38s linear infinite}
.tools__track--d{animation:def-droite 46s linear infinite}
.tools:hover .tools__track{animation-play-state:paused}
@keyframes def-gauche{from{transform:translateX(0)}    to{transform:translateX(-25%)}}
@keyframes def-droite{from{transform:translateX(-25%)} to{transform:translateX(0)}}
.tools .ph{flex:none}
@media (prefers-reduced-motion:reduce){
  .tools__track{animation:none}
}

/* --- cartes de plans : ordre de lecture et alignement -------------------
   L'ordre est desormais nom, promesse, prix, fonctionnalites, bouton :
   on explique avant de demander de cliquer. La grille interne aligne les
   quatre blocs d'une carte a l'autre, pour que la comparaison se fasse a
   l'horizontale. */
.plans--3 .plan{display:grid;grid-template-rows:auto auto 1fr auto;gap:0}
.plan__hd{min-height:8.4em}
.plans--3 .plan__tag{margin:14px 0 0;min-height:0}
/* hauteur commune : sans cela la carte sans mention d'economie fait
   demarrer sa liste plus haut, et la comparaison horizontale se casse */
.plan__px{padding:26px 0 4px;border-top:1px solid rgba(4,52,40,.1);margin-top:22px;min-height:156px}
.plans--3 .plan--hi .plan__px{border-color:rgba(255,255,255,.16)}
.plans--3 .plan__price{margin-bottom:8px}
.plan__eco{font-size:14px;line-height:1.4;color:#4A6B60;margin-bottom:4px}
.plan__eco s{opacity:.65}
.plan__eco b{font-weight:700;color:var(--sapin)}
.plans--3 .plan--hi .plan__eco{color:#9FC4B4}
.plans--3 .plan--hi .plan__eco b{color:var(--citron)}
.plan__feats{padding:24px 0 26px}
.plan__herite{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#6C8C80;margin-bottom:16px}
.plans--3 .plan--hi .plan__herite{color:var(--citron)}
.plans--3 .plan ul{margin-top:0}
.plans--3 .plan .btn{align-self:end}

/* le bandeau Enterprise porte le meme intitule */
.entb__mid{min-width:0}
.entb .plan__herite{margin-bottom:12px}

/* =========================================================================
   CARTES DE PLANS — passe de rattrapage
   Les billes grises a droite de chaque ligne dataient : elles imitaient un
   volume, n'apportaient aucune information, et se lisaient comme des puces
   posees du mauvais cote. Une coche fine a gauche dit ce qu'elle doit dire.
   ========================================================================= */
.plans--3 .plan li{justify-content:flex-start;gap:12px}
.ck{width:17px;height:17px;flex:none;position:relative;margin-top:.2em;
  color:var(--sapin);opacity:.85}
.ck::before{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;
  border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.plans--3 .plan--hi .ck{color:var(--citron);opacity:1}

/* le trait sous la promesse disparait : l'espace suffit a separer,
   et un filet plein est le reflexe qui date une mise en page */
.plan__px{border-top:0;margin-top:0;padding-top:8px}
.plan__hd{padding-bottom:26px}

/* fond blanc et contour fin plutot qu'un aplat gris : les cartes gagnent
   en nettete, et le survol donne enfin un retour */
.plans--3 .plan{background:#fff;box-shadow:inset 0 0 0 1px rgba(4,52,40,.09);
  transition:transform .22s ease,box-shadow .22s ease}
.plans--3 .plan:hover{transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(4,52,40,.16),0 18px 40px rgba(4,52,40,.09)}
.plans--3 .plan--hi{background:var(--sapin);
  box-shadow:inset 0 0 0 1px rgba(223,255,165,.3),0 14px 36px rgba(4,52,40,.14)}
.plans--3 .plan--hi:hover{
  box-shadow:inset 0 0 0 1px rgba(223,255,165,.55),0 22px 48px rgba(4,52,40,.18)}

/* chiffres a chasse fixe : les prix ne bougent plus d'un pixel quand on
   change de periodicite */
.plans--3 .plan__price,.plan__eco{font-variant-numeric:tabular-nums}

/* le bandeau Enterprise suit le meme traitement */
.entb{box-shadow:inset 0 0 0 1px rgba(4,52,40,.07)}
.entb__list li::before{background:var(--sapin);opacity:.5}

/* --- bandeau Enterprise & API : violet anime --------------------------
   Le lin de la charte sert de base ; deux halos derivent lentement par
   dessus et le degrade glisse, pour que le bandeau respire sans jamais
   passer devant les trois cartes. Tout est decoratif : le texte reste
   sapin, le CTA reste citron. --------------------------------------- */
.entb{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(108deg,#EEF4FC 0%,var(--dragee) 26%,#B9D0EE 52%,#D6E4F7 76%,#EEF4FC 100%);
  background-size:220% 100%;
  box-shadow:inset 0 0 0 1px rgba(46,84,134,.20);
  animation:entb-flux 24s linear infinite}
@keyframes entb-flux{from{background-position:0 0} to{background-position:220% 0}}

/* les halos : z-index negatif, donc au-dessus du fond du bandeau mais
   sous son contenu — aucune ombre portee sur le texte */
.entb::before,.entb::after{content:"";position:absolute;z-index:-1;
  border-radius:50%;pointer-events:none;filter:blur(64px)}
.entb::before{width:460px;height:460px;left:-90px;top:-190px;
  background:radial-gradient(circle,rgba(74,132,214,.45),rgba(74,132,214,0) 70%);
  animation:entb-halo-a 21s ease-in-out infinite alternate}
.entb::after{width:400px;height:400px;right:-70px;bottom:-200px;
  background:radial-gradient(circle,rgba(110,176,226,.40),rgba(110,176,226,0) 70%);
  animation:entb-halo-b 27s ease-in-out infinite alternate}
@keyframes entb-halo-a{to{transform:translate3d(160px,70px,0) scale(1.18)}}
@keyframes entb-halo-b{to{transform:translate3d(-150px,-60px,0) scale(1.14)}}

/* « Sur devis » prend le degrade : c'est le mot qu'on doit retenir */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .entb__price{background:linear-gradient(92deg,#1F3F6E,#3E7BC9 50%,#2B5390);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    color:transparent;animation:entb-flux 14s linear infinite}
}
.entb__list li::before{background:#3C6299;opacity:.75}
.entb__tag,.entb__who{color:#33455E}

@media (prefers-reduced-motion:reduce){
  .entb,.entb__price,.entb::before,.entb::after{animation:none}
}
.entb .plan__herite{color:#2B5390}

/* --- section promesse : elle occupait un tiers de l'ecran pour un
   contenu qui merite la pleine largeur. Echelle fluide, portrait plus
   grand, et le CTA revient sous le texte qu'il conclut. ------------- */
.sec--promise{padding:clamp(72px,7vw,120px) 0}
.sec--promise .wrap{max-width:1320px}
.promise{grid-template-columns:.92fr 1.08fr;gap:clamp(40px,5vw,88px)}
.promise__h{font-size:clamp(32px,4vw,62px);line-height:1.04;
  margin-bottom:clamp(20px,2vw,30px)}
.promise p{font-size:clamp(17px,1.4vw,23px);line-height:1.45;
  margin-bottom:clamp(14px,1.2vw,20px)}
.toggles{gap:clamp(14px,1.3vw,20px);margin-top:clamp(28px,2.6vw,42px)}
.toggles li{font-size:clamp(17px,1.5vw,25px);gap:clamp(14px,1.2vw,20px)}
.toggles .tg{width:clamp(44px,3.6vw,60px);height:clamp(24px,2vw,33px)}
.toggles .tg::after{top:14%;right:9%;height:72%;width:auto;aspect-ratio:1}
.promise__cta{display:flex;justify-content:flex-start;
  margin-top:clamp(30px,3vw,46px)}
.promise__cta .btn{font-size:clamp(14px,1.05vw,17px);
  padding:clamp(15px,1.3vw,20px) clamp(26px,2.2vw,34px)}

/* sous 980 px la section repasse en colonne : la regle de la grille
   fluide etant plus tardive, il faut la neutraliser ici */
@media (max-width:980px){
  .promise{grid-template-columns:1fr;gap:34px}
  .promise__img{max-width:420px}
  .promise__h{font-size:clamp(30px,6.4vw,40px)}
}

/* --- barre de navigation : pilule contouree, langue en pastille ronde,
   connexion en simple mot et essai gratuit en bouton plein. L'ordre
   monte en engagement de gauche a droite. -------------------------- */
.nav__menu{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(4,52,40,.13);
  padding:5px 7px;gap:2px}
.nav__menu a:hover{background:var(--menthe-pale)}

/* les deux langues restent visibles : on voit du premier coup d'oeil
   qu'il y a une version anglaise, et vers quoi on bascule */
.lang{gap:2px;padding:3px;border-radius:100px;
  box-shadow:inset 0 0 0 1.5px rgba(4,52,40,.16)}
.lang :is(button,a){display:grid;place-items:center;min-width:36px;height:32px;padding:0 9px;
  border-radius:100px;font-size:13px;font-weight:600;color:#8AA39A;
  transition:background .15s,color .15s}
.lang :is(button,a):hover{color:var(--sapin)}
.lang :is(button,a).on{background:var(--menthe-pale);color:var(--sapin)}

.nav__login{padding:10px 6px;box-shadow:none;background:none}
.nav__login:hover{background:none;box-shadow:none;color:var(--sapin-80)}
.nav__trial{font-size:15px;padding:12px 22px}

@media (max-width:980px){
  .nav__trial{font-size:14px;padding:10px 18px}
}
@media (max-width:520px){
  /* place comptee : l'essai gratuit prime, la connexion passe dans le menu
     (a cabler avec le burger avant mise en ligne) */
  .nav__login{display:none}
}
@media (max-width:460px){
  .nav__trial{font-size:13px;padding:9px 14px;gap:8px}
  .nav__trial::before{width:7px;height:7px}
  .lang{padding:2px}
  .lang :is(button,a){min-width:30px;height:28px;padding:0 6px;font-size:12px}
}
/* la pilule se cale a cote du logo, les actions filent a droite */
.nav__menu{margin-left:26px}
.nav__end{margin-left:auto}
@media (max-width:980px){.nav__menu{margin-left:0}}
@media (max-width:400px){
  /* la barre porte trois blocs incompressibles : on reprend la place sur
     les marges et les ecarts plutot que sur la taille du texte */
  .nav__in{padding:0 14px;gap:8px}
  .nav__end{gap:6px}
  .nav__trial{padding:9px 12px;gap:7px}
  .burger{width:38px;height:38px}
}

/* =========================================================================
   NOTRE HISTOIRE
   Le recit tient sur une colonne etroite (une histoire se lit, elle ne se
   scanne pas), l'equipe passe en grille large. Les blocs « a completer »
   sont volontairement visibles : tant qu'ils sont la, la page n'est pas
   publiable.
   ========================================================================= */
.sec--story{padding:clamp(48px,6vw,92px) 0 clamp(28px,3vw,44px)}
.eyebrow{font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:#5E7D72;margin-bottom:18px}
.story__h1{font-size:clamp(38px,5.6vw,84px);line-height:1.02;letter-spacing:-.015em}
.story__lede{max-width:34em;margin-top:clamp(20px,2vw,30px);
  font-size:clamp(17px,1.5vw,24px);line-height:1.45}

/* --- les chapitres : numero en marge, texte en colonne etroite --- */
.sec--chaps{padding:clamp(28px,3vw,44px) 0}
.chap{max-width:920px;display:grid;grid-template-columns:84px 1fr;gap:clamp(16px,2vw,32px);
  padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--trait)}
.chap:first-child{border-top:0}
.chap__n{font-family:var(--corps);font-weight:500;font-size:clamp(26px,2.4vw,38px);
  color:var(--trait);line-height:1}
.chap__b h2{font-size:clamp(24px,2.4vw,38px);line-height:1.1;margin-bottom:14px}

/* --- jalons --- */
.jalons{max-width:920px;list-style:none;counter-reset:none;display:grid;gap:0;margin-top:26px}
.jalons li{display:grid;grid-template-columns:128px 1fr;gap:20px;align-items:baseline;
  padding:18px 0;border-top:1px solid var(--trait)}
.jalons li b{font-family:var(--corps);font-weight:500;font-size:clamp(20px,1.9vw,28px)}
.jalons li span{font-size:clamp(16px,1.3vw,20px);line-height:1.4}

/* --- convictions --- */
.convs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.conv{background:var(--menthe-pale);border-radius:28px;padding:clamp(24px,2.4vw,34px)}
.conv h3{font-size:clamp(20px,1.8vw,27px);line-height:1.18;margin-bottom:14px}

/* --- l'equipe --- */
.sec--equipe .wrap{max-width:1320px}
.membres{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2vw,30px);margin-top:clamp(28px,3vw,44px)}
.mb{margin:0}
.mb__img{aspect-ratio:4/5;border-radius:24px;width:100%}
.mb figcaption{padding-top:16px}
.mb figcaption b{display:block;font-family:var(--corps);font-weight:500;
  font-size:clamp(19px,1.5vw,24px);line-height:1.1}
.mb__role{display:block;font-size:13px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:#5E7D72;margin-top:6px}

/* --- marqueur « a completer » --- */
.todo{position:relative;color:#6C7F79;font-style:italic;line-height:1.5;
  background:repeating-linear-gradient(135deg,rgba(195,208,204,.16) 0 9px,
    rgba(195,208,204,.05) 9px 18px);
  border:1px dashed var(--trait);border-radius:14px;padding:14px 16px}
.todo__tag{display:inline-block;margin-right:9px;padding:2px 9px;border-radius:100px;
  background:var(--citron);color:var(--sapin);font-style:normal;font-weight:700;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;vertical-align:1px}
.todo--s{margin-top:12px;font-size:14px;padding:11px 13px;border-radius:12px}

@media (max-width:1080px){
  .convs{grid-template-columns:1fr 1fr}
  .membres{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .convs{grid-template-columns:1fr}
  .membres{grid-template-columns:1fr 1fr}
  .chap{grid-template-columns:1fr;gap:8px}
  .chap__n{font-size:20px}
  .jalons li{grid-template-columns:1fr;gap:4px}
}
/* les sections de la page histoire n'heritent d'aucun rythme vertical :
   on le pose ici, sinon les blocs se touchent */
.sec--jalons,.sec--conv{padding:clamp(44px,5vw,84px) 0}
.sec--equipe{padding:clamp(44px,5vw,84px) 0 clamp(56px,6vw,100px)}
.sec--equipe .lede{margin-top:12px}
[data-page="equipe"] .sec--prcta .wrap{max-width:1320px}
/* six entrees dans la pilule : entre 980 et 1180 px la barre doit se
   resserrer, sinon le francais (« Fonctionnalites », « Notre histoire »)
   pousse le bouton hors de l'ecran */
@media (max-width:1180px){
  .nav__in{padding:0 18px;gap:12px}
  .nav__menu{margin-left:14px;padding:4px 5px}
  .nav__menu a{padding:9px 12px;font-size:14px}
  .nav__end{gap:10px}
  .nav__login{font-size:14px;padding:9px 4px}
  .nav__trial{font-size:14px;padding:11px 17px}
}
/* rappel : ce bloc doit rester le dernier des regles de barre, il repasse
   apres le resserrement a 1180 px */
@media (max-width:400px){
  .nav__in{padding:0 14px;gap:8px}
  .nav__end{gap:6px}
  .nav__trial{padding:9px 12px;gap:7px}
}
.mb{min-width:0}
@media (max-width:420px){
  /* a deux colonnes le gabarit photo passe sous sa largeur minimale */
  .membres{grid-template-columns:1fr}
  .mb__img{max-width:320px}
}
/* les portraits et la photo de groupe sont poses en fond : une seule copie
   du binaire pour les deux langues */
.mb__img,.story__groupe{background-size:cover;background-position:50% 22%;
  background-repeat:no-repeat;background-color:var(--menthe-pale)}
.story__groupe{margin-top:clamp(28px,3.4vw,52px);width:100%;aspect-ratio:3/2;
  border-radius:clamp(24px,2.6vw,40px);background-position:50% 42%}
.eq__note{max-width:38em;margin-top:16px}
/* le recit est ecrit : les paragraphes des chapitres et des convictions
   prennent le rythme de lecture, pas celui des blocs d'attente */
.chap__b p{font-size:clamp(16px,1.25vw,19px);line-height:1.58;max-width:36em}
.chap__b p + p{margin-top:14px}
.conv p{font-size:clamp(15px,1.1vw,17px);line-height:1.55}
.conv h3{font-size:clamp(19px,1.5vw,23px);line-height:1.22}
/* « Sept. 2025 » ne doit pas se couper en deux lignes */
.jalons li{grid-template-columns:168px 1fr}
.jalons li b{white-space:nowrap}
@media (max-width:760px){.jalons li{grid-template-columns:1fr}}

/* =========================================================================
   PAGE API
   Le wallet de credits se lit en trois temps : le principe, les formules,
   le cout de chaque appel. Les tableaux reutilisent .mx et .pk de la page
   Tarifs plutot que d'inventer un deuxieme systeme de tableaux.
   ========================================================================= */
.sec--apihead{padding:clamp(48px,6vw,92px) 0 clamp(24px,2.6vw,36px)}
.api__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.6vw,36px)}
.btn--vide{background:none;color:var(--sapin);
  box-shadow:inset 0 0 0 1.5px rgba(4,52,40,.22)}
.btn--vide::before{background:var(--sapin)}
.btn--vide:hover{background:var(--menthe-pale)}

/* la grille n'est pas arbitree : le dire est une obligation, pas une note */
.api__avert{max-width:52em;margin-top:clamp(22px,2.4vw,34px);
  padding:14px 18px;border-radius:16px;font-size:14.5px;line-height:1.5;
  color:#3A5A50;background:var(--citron-pale);
  box-shadow:inset 0 0 0 1px rgba(4,52,40,.10)}

.sec--apiplans,.sec--apiact,.sec--apiex{padding:clamp(44px,5vw,84px) 0}
.apls{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.apl{display:grid;grid-template-rows:auto auto 1fr auto;
  background:#fff;border-radius:28px;padding:clamp(22px,2vw,28px);
  box-shadow:inset 0 0 0 1px rgba(4,52,40,.09);
  transition:transform .22s ease,box-shadow .22s ease}
.apl:hover{transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(4,52,40,.16),0 18px 40px rgba(4,52,40,.09)}
.apl--hi{background:var(--sapin);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(223,255,165,.3),0 14px 36px rgba(4,52,40,.14)}
.apl--hi .chip{background:var(--citron);color:var(--sapin)}
.apl--hi .apl__eng,.apl--hi .apl__per,.apl--hi .apl__usage{color:#B9CFC7}
.apl--hi dt{color:#B9CFC7} .apl--hi dd{color:#fff}
.apl__hd{padding-bottom:16px}
.apl__eng{margin-top:10px;font-size:13px;color:#5E7D72}
.apl__px{font-family:var(--corps);font-weight:500;
  font-size:clamp(26px,2.2vw,34px);line-height:1.05;
  font-variant-numeric:tabular-nums;padding-bottom:16px}
.apl__per{display:block;font-family:var(--corps);font-weight:400;
  font-size:13px;color:#5E7D72;margin-top:6px}
.apl__d{display:grid;gap:10px;padding:16px 0;
  border-top:1px solid rgba(4,52,40,.10)}
.apl--hi .apl__d{border-top-color:rgba(255,255,255,.16)}
.apl__d > div{display:flex;justify-content:space-between;gap:12px;
  align-items:baseline;font-size:14px}
.apl__d dt{color:#5E7D72}
.apl__d dd{font-weight:600;font-variant-numeric:tabular-nums}
.apl__usage{font-size:13px;line-height:1.45;color:#5E7D72;padding-top:14px;
  border-top:1px solid rgba(4,52,40,.10)}
.apl--hi .apl__usage{border-top-color:rgba(255,255,255,.16)}

.entb--api{margin-top:22px}
.ap th{font-weight:500}
.ap__c{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ap__ex{margin-top:26px;max-width:620px}
.ap__ex .ap__c{text-align:right}
.entb__api{font-size:13px;font-weight:600;color:#2B5390;text-decoration:underline;
  text-underline-offset:3px}

@media (max-width:1080px){.apls{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.apls{grid-template-columns:1fr}}
/* sur la carte sombre, les intitules doivent rester lisibles : la regle
   generique .apl__d dt arrivait apres .apl--hi dt et la ecrasait */
.apl--hi .apl__d dt{color:#B9CFC7}
.apl--hi .apl__d dd{color:#fff}

/* --- cartes des cinq etapes : echelle ramenee a la taille d'ecran -------
   La premiere version avait ete calibree sur une vue dezoomee : a 100 %
   le titre et les lignes depassaient la carte, la troisieme ligne etait
   coupee. Tout le bloc est reduit d'environ un tiers, et l'illustration
   est plafonnee au lieu de prendre toute la hauteur. ------------------- */
.dcard__in{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(26px,2.6vw,52px);padding:clamp(30px,2.8vw,52px)}
.dcard__n{font-size:clamp(13px,.85vw,17px);margin-bottom:clamp(10px,.9vw,16px)}
.dcard h3{font-size:clamp(34px,4.4vw,88px);letter-spacing:-.028em}
.dcard ul{gap:clamp(14px,2vh,30px);margin:clamp(22px,3vh,42px) 0 0}
.dcard li{font-size:clamp(16px,1.45vw,25px);line-height:1.34;max-width:30em;
  gap:clamp(10px,.8vw,14px)}
.dcard .tg{width:clamp(32px,2.3vw,42px);height:clamp(18px,1.3vw,24px)}
.dcard .tg::after{width:clamp(13px,.9vw,17px);height:clamp(13px,.9vw,17px)}
.dcard__media .ph{height:auto;width:100%;
  max-width:clamp(240px,30vw,460px);max-height:100%;aspect-ratio:1}
/* le texte ne se repartit plus sur toute la hauteur : a la nouvelle echelle
   cela creait des trous entre les lignes. Bloc compact, centre verticalement. */
.dcard__txt{justify-content:center}
.dcard ul{flex:0 0 auto;justify-content:flex-start;
  gap:clamp(14px,1.5vw,22px);margin:clamp(20px,2.2vw,32px) 0 0}
/* la carte n'a plus besoin de toute la hauteur d'ecran : plafonnee, elle
   garde une proportion lisible sur les grands ecrans. Le script lit
   offsetHeight du pin, la hauteur de la section suit toute seule. */
.deck__pin{height:min(calc(100svh - 120px),640px)}

/* --- cartes alignees sur la barre de navigation ------------------------
   La barre est en max-width 1320 px avec 28 px de marge interne : les
   cartes reprennent exactement cette boite, leurs bords tombent donc sur
   le logo a gauche et sur le bouton d'essai a droite. ----------------- */
.deck__pin{width:min(1264px,calc(100% - 56px));margin-inline:auto;
  height:min(calc(100svh - 140px),560px)}
@media (max-width:1180px){
  .deck__pin{width:calc(100% - 36px)}
}
/* le bloc texte et l'illustration partagent le meme axe vertical : la
   colonne de droite ne s'etire plus sur toute la hauteur */
.dcard__in{align-items:center}
.dcard__media{align-self:center}

/* --- barre : menu deroulant -------------------------------------------
   Le panneau se pose sous le bouton, dans le flux de la pilule. Il est
   ferme par l'attribut hidden, donc invisible sans JS mais present pour
   les moteurs. ------------------------------------------------------- */
.nav__drop{position:relative;display:flex}
.nav__dropbtn{display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:100px;font-size:15px;font-weight:inherit;
  color:inherit;background:none;cursor:pointer;transition:background .15s}
.nav__dropbtn:hover,.nav__drop.on .nav__dropbtn{background:var(--menthe-pale)}
.nav__chev{transition:transform .18s ease;opacity:.55}
.nav__drop.on .nav__chev{transform:rotate(180deg)}
.nav__panel{position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%);min-width:216px;z-index:5;
  display:flex;flex-direction:column;gap:2px;padding:8px;
  background:#fff;border-radius:20px;
  box-shadow:0 18px 44px rgba(4,52,40,.14),inset 0 0 0 1px rgba(4,52,40,.10)}
.nav__panel[hidden]{display:none}
.nav__panel a{display:block;padding:10px 14px;border-radius:14px;
  font-size:15px;white-space:nowrap;transition:background .15s}
.nav__panel a:hover{background:var(--menthe-pale)}
/* la pointe qui relie le panneau au bouton */
.nav__panel::before{content:"";position:absolute;left:50%;top:-7px;
  width:14px;height:14px;transform:translateX(-50%) rotate(45deg);
  background:#fff;box-shadow:inset 1px 1px 0 rgba(4,52,40,.10)}
/* zone tampon : le curseur traverse l'espace sans refermer le panneau */
.nav__drop::after{content:"";position:absolute;top:100%;left:0;right:0;
  height:14px}
@media (max-width:1180px){
  .nav__dropbtn{padding:9px 12px;font-size:14px}
}

/* --- menu mobile -------------------------------------------------------
   Sous 980 px la pilule est masquee : ce panneau est la seule navigation
   du site sur telephone. Il se pose sous la barre, en plein ecran. ----- */
.navmob{display:none}
.burger svg:last-child{display:none}
.burger.on svg:first-child{display:none}
.burger.on svg:last-child{display:block}
.navmob__t{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#5E7D72;margin:22px 0 4px}
.navmob__a{display:block;padding:13px 0;font-size:19px;font-weight:500;
  border-bottom:1px solid rgba(4,52,40,.08)}
.navmob__a--sub{font-size:17px;font-weight:400;padding-left:14px}
.navmob__login{display:block;padding:16px 0 0;font-size:17px;font-weight:600}
.navmob__cta{margin-top:18px;width:100%;justify-content:center}

@media (max-width:980px){
  .navmob{display:block;position:fixed;left:0;right:0;
    top:var(--nav-h,78px);bottom:0;z-index:70;
    background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .navmob[hidden]{display:none}
  .navmob__in{padding:8px 22px 40px;max-width:560px;margin:0 auto}
  /* le fond ne doit pas defiler derriere le panneau */
  html.navmob-ouvert,html.navmob-ouvert body{overflow:hidden}
}

/* =========================================================================
   VIRAGE IA — campagne « Don't miss the AI turn »
   La bascule du design system devient la metaphore : eteinte a gauche,
   allumee a droite, et elle s'allume au survol du regard.
   ========================================================================= */

/* --- hero : sourcil, deux boutons, microcopie ------------------------- */
.hero__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px;
  font-size:15px;font-weight:600;letter-spacing:.01em}
.tg--ia{flex:none}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__micro{margin-top:18px;font-size:13.5px;color:#5E7D72}
.hero__pt{opacity:.45;margin:0 2px}

/* --- 3 · avant / apres ------------------------------------------------ */
.sec--turn{padding:clamp(56px,6vw,104px) 0}
.turn__intro{max-width:46em;margin-top:16px}
.turn{margin-top:clamp(30px,3.4vw,52px);border-radius:36px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(4,52,40,.10)}
/* L'entete et les lignes de l'ancien tableau a deux colonnes. Les regles
   visant `.turn__hd span` sont supprimees : elles attrapaient desormais la
   pastille de l'interrupteur et le libelle de droite, a qui elles collaient
   18 px de rembourrage et un fond citron. */
.turn__r--v2{display:grid;grid-template-columns:1fr 1fr}
.turn__r > div{display:flex;gap:14px;align-items:flex-start;
  padding:18px clamp(20px,2.2vw,32px);font-size:clamp(15px,1.2vw,18px);
  line-height:1.4;border-top:1px solid rgba(4,52,40,.08)}
.turn__off{color:#7C8F89}
.turn__on{background:var(--citron-pale);color:var(--sapin);font-weight:500}
.turn__r .tg{margin-top:.15em}
.turn__cta{margin-top:clamp(26px,2.6vw,38px)}

/* --- 4 · portrait et citation du fondateur ---------------------------- */
.promise__fig{margin:0}
.promise__fig figcaption{margin-top:16px;font-size:15px;line-height:1.5;
  color:#3A5A50;max-width:30em}

/* --- 10 · les agents, point culminant de la page ---------------------- */
.sec--agents{padding:clamp(40px,4.4vw,72px) 0}
.agents{position:relative;overflow:hidden;background:var(--sapin);color:#fff;
  border-radius:clamp(32px,3.4vw,56px);
  padding:clamp(40px,5vw,86px) clamp(26px,4vw,72px)}
.agents::before{content:"";position:absolute;right:-10%;top:-30%;
  width:min(640px,70%);aspect-ratio:1;background:var(--art-trefle);
  background-size:contain;background-repeat:no-repeat;
  filter:brightness(0) invert(1);opacity:.14;transform:rotate(-12deg)}
.agents > *{position:relative;z-index:1}
.eyebrow--clair{color:var(--citron)}
.agents h2{color:#fff;font-size:clamp(34px,4.4vw,72px);line-height:1.02;
  max-width:14em}
.agents__body{max-width:40em;margin-top:clamp(18px,1.8vw,28px);
  font-size:clamp(16px,1.3vw,21px);line-height:1.5;color:#C6DCD2}
.agcs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,26px);
  margin:clamp(30px,3.2vw,48px) 0 clamp(22px,2.2vw,32px)}
.agc{background:rgba(255,255,255,.06);border-radius:26px;
  padding:clamp(22px,2.2vw,32px);
  box-shadow:inset 0 0 0 1px rgba(223,255,165,.18)}
.agc h3{color:var(--citron);font-size:clamp(19px,1.6vw,25px);margin-bottom:10px}
.agc p{font-size:clamp(15px,1.15vw,18px);line-height:1.45;color:#D7E7E0}
.agents__rass{max-width:38em;font-size:15px;line-height:1.5;color:#9FC4B4;
  margin-bottom:clamp(24px,2.4vw,34px)}

/* --- 11 · integrations : badge ATS/CRM -------------------------------- */
.integ__badge{display:inline-block;margin-top:clamp(26px,2.6vw,38px);
  padding:10px 18px;border-radius:100px;background:var(--lin);
  font-size:14.5px;font-weight:600;color:var(--sapin)}
.integ__cta{margin-top:22px}

/* --- 12 et 14 · sous-titres ------------------------------------------- */
.plans__sub{max-width:40em;margin:14px auto 0;text-align:center}
/* la section est sur fond clair : la couleur prevue pour un fond
   sombre rendait le sous-titre illisible */
.contact__sub{max-width:34em;margin:0 auto 26px;color:#3A5A50}

@media (max-width:860px){
  .turn__hd,.turn__r{grid-template-columns:1fr}
  .turn__hd span:first-child,.turn__off{border-bottom:0}
  .agcs{grid-template-columns:1fr}
}
/* la bascule s'allume : citron plein, pastille a droite */
.hero__eyebrow .tg,.turn__on .tg{background:var(--trait);transition:background .45s ease}
.hero__eyebrow .tg::after,.turn__on .tg::after{transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.hero__eyebrow .tg:not(.on)::after,.turn__on .tg:not(.on)::after{transform:translateX(-18px)}
.hero__eyebrow .tg.on,.turn__on .tg.on{background:var(--sapin)}
.turn__on .tg.on{background:var(--citron)}
.turn__on .tg.on::after{background:var(--sapin)}
@media (prefers-reduced-motion:reduce){
  .hero__eyebrow .tg,.turn__on .tg,
  .hero__eyebrow .tg::after,.turn__on .tg::after{transition:none}
}
/* la colonne « sans IA » garde ses bascules en position eteinte : pastille
   a gauche, piste grise. Sans cette regle elles heritaient de la position
   allumee et le contraste du tableau disparaissait. */
.turn__off .tg{background:#DCE4E1}
.turn__off .tg::after{right:auto;left:3px;background:#fff;
  box-shadow:0 1px 2px rgba(4,52,40,.14)}

/* --- la bascule du hero porte la campagne : elle doit se voir ----------
   Dimensions pilotees par deux variables, pour que la course de la
   pastille se calcule toute seule : course = largeur - hauteur. ------- */
.hero__eyebrow{--tw:clamp(58px,4.4vw,78px);--th:clamp(32px,2.4vw,43px);
  gap:clamp(14px,1.2vw,18px);margin-bottom:clamp(24px,2.2vw,32px);
  font-size:clamp(16px,1.35vw,21px)}
.hero__eyebrow .tg{width:var(--tw);height:var(--th)}
.hero__eyebrow .tg::after{top:4px;right:4px;
  width:calc(var(--th) - 8px);height:calc(var(--th) - 8px)}
.hero__eyebrow .tg:not(.on)::after{
  transform:translateX(calc(-1 * (var(--tw) - var(--th))))}
/* les schemas des cinq etapes remplacent le gabarit gris : ils doivent
   occuper la meme boite, sans la deformer */
.dcard__svg{width:100%;max-width:clamp(240px,30vw,460px);aspect-ratio:1;
  display:grid;place-items:center}
.dcard__svg svg{width:100%;height:100%;display:block}

/* =========================================================================
   TYPOGRAPHIE DE MARQUE
   Clash Display pour les titres, en graisse 600 et interlettrage resserre
   a -0,02 em : c'est ce reglage, pas la police seule, qui donne la densite
   des titres. Figtree pour le corps, avec les deux variantes alternatives
   cv11 et ss01 activees.
   ========================================================================= */
h1,h2,h3,h4,.logo,.foot__logo,
.plan__price,.apl__px,.chip,.stat b,.dcard h3,.dcard__n,
.story__h1,.pr__h1,.foot__follow,.ar__cta p,.ar__rel-t,.ph b{
  font-weight:600;letter-spacing:-.02em}

/* les intitules en capitales font exception : resserrer des capitales les
   colle, c'est l'inverse du reglage a appliquer */
.eyebrow,.mb__role,.plan__who,.plan__tag,.bl__label,.ar__toc-t,.ar__rel-k,
.foot h4,.foot .ft__t,.turn__hd span,.ph span,.entb__who{
  letter-spacing:.09em}

body{font-feature-settings:"cv11","ss01";
  font-variant-ligatures:common-ligatures}

/* ===================================================================
   TRUST CENTER — cartes verticales a pictogramme
   Place en fin de feuille : ce bloc doit l'emporter sur les regles
   .tc__doc / .tc__ai / .tc__mesures ecrites plus haut, media queries
   comprises, d'ou leur reecriture ici.
   =================================================================== */
.sec--cartes{background:var(--menthe-pale);padding:66px 0 72px}
.sec--cartes + .sec--tcdark{padding-top:40px}

.tc__docs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tc__doc{display:flex;flex-direction:column;align-items:stretch;gap:0;
  background:#fff;border-radius:26px;padding:26px 26px 22px;
  box-shadow:0 1px 2px rgba(4,52,40,.05),0 10px 26px rgba(4,52,40,.06)}
.tc__doc h3{font-size:17.5px;line-height:1.28;margin:0 0 8px}
.tc__doc p{font-size:14px;line-height:1.5;color:#4A6B60;margin:0 0 20px}

.tc__ico{width:46px;height:46px;flex:none;border-radius:50%;background:var(--citron);
  color:var(--sapin);display:grid;place-items:center;margin-bottom:18px}
.tc__ico .ico{width:22px;height:22px}

.tc__ask{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 18px;border-radius:100px;background:#fff;color:var(--sapin);
  font-size:14.5px;font-weight:600;
  box-shadow:inset 0 0 0 1.5px rgba(4,52,40,.14);
  transition:background .16s,box-shadow .16s}
.tc__ask:hover{background:var(--menthe-pale);box-shadow:inset 0 0 0 1.5px rgba(4,52,40,.3)}
.tc__ask .ico-fl{width:17px;height:17px;flex:none;transition:transform .18s}
.tc__ask:hover .ico-fl{transform:translateX(3px)}

/* gouvernance IA : meme carte, deux colonnes */
.tc__ais{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tc__ai{display:flex;flex-direction:column;border-left:none;
  background:#fff;border-radius:26px;padding:28px 30px 30px;
  box-shadow:0 1px 2px rgba(4,52,40,.05),0 10px 26px rgba(4,52,40,.06)}
.tc__ai h3{font-size:19px;line-height:1.25;margin:0 0 7px}
.tc__ai p{font-size:15px;line-height:1.5;color:#3A5A50;margin:0}

/* apercu conformite : meme carte blanche, posee sur le fond blanc */
.tc__stat{background:#fff;border-radius:24px;padding:24px 26px;
  box-shadow:0 1px 2px rgba(4,52,40,.05),0 10px 26px rgba(4,52,40,.06)}

/* mesures de securite : la puce devient une coche */
.tc__mesures li{display:flex;align-items:flex-start;gap:11px;padding:14px 16px}
.tc__mesures li::before{display:none}
.tc__mesures .ico-ck{width:16px;height:16px;flex:none;color:var(--citron);margin-top:1px}

@media (prefers-reduced-motion:reduce){
  .tc__ask,.tc__ask .ico-fl{transition:none}
  .tc__ask:hover .ico-fl{transform:none}
}
@media (max-width:1024px){
  .tc__docs{grid-template-columns:repeat(2,1fr)}
  .sec--cartes{padding:52px 0 56px}
}
@media (max-width:720px){
  .tc__docs,.tc__ais{grid-template-columns:1fr}
  .tc__doc{padding:22px 22px 20px}
  .tc__ai{padding:24px 24px 26px}
}

/* ===================================================================
   TRUST CENTER, 2e passe — securite en clair, gouvernance IA en sombre,
   contact en carte compacte. Encore une fois place en fin de feuille :
   ces regles doivent l'emporter sur le bloc precedent.
   =================================================================== */

/* --- securite : cartes vert pale sur fond blanc --- */
.sec--mesures{padding:56px 0 66px}
.tc__mesures{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tc__mesures li{display:flex;align-items:center;gap:12px;padding:17px 18px;border-radius:20px;
  background:var(--menthe-pale);color:var(--sapin);font-size:14.5px;line-height:1.3}
.tc__mesures li::before{display:none}
.tc__ck{width:30px;height:30px;flex:none;border-radius:50%;background:var(--citron);
  display:grid;place-items:center}
.tc__ck .ico-ck{width:15px;height:15px;color:var(--sapin)}

/* --- gouvernance IA : pan sombre pleine largeur, centre --- */
.sec--iadark{background:var(--sapin);color:#fff;padding:72px 0 78px}
.sec--iadark .wrap{text-align:center}
.ia__pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:8px 16px 8px 13px;border-radius:100px;background:rgba(223,255,165,.12);
  color:var(--citron);font-size:13.5px;font-weight:600;letter-spacing:0}
.ia__pill .ico-et{width:16px;height:16px;flex:none}
.sec--iadark h2{color:var(--citron);font-size:40px;margin-bottom:14px}
.ia__lede{color:#B6D0C4;font-size:16.5px;line-height:1.55;max-width:58ch;margin:0 auto 38px}
.sec--iadark .tc__ais{grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
.sec--iadark .tc__ai{background:rgba(255,255,255,.045);border-radius:22px;
  padding:24px 22px 26px;box-shadow:inset 0 0 0 1px rgba(223,255,165,.15)}
.sec--iadark .tc__ai h3{color:#fff;font-size:16.5px;line-height:1.3;margin:0 0 9px}
.sec--iadark .tc__ai p{color:#B6D0C4;font-size:14px;line-height:1.5;margin:0}
.sec--iadark .tc__ico{width:40px;height:40px;margin-bottom:16px}
.sec--iadark .tc__ico .ico{width:20px;height:20px}

/* --- contact : une carte, pas un pave --- */
.sec--contact{background:#EEF2FB;padding:64px 0 70px;text-align:center}
.sec--contact h2{font-size:36px;margin-bottom:12px}
.sec--contact .tc__note{margin:0 auto 30px}
.ct__carte{max-width:430px;margin:0 auto;background:#fff;border-radius:28px;
  padding:30px 30px 32px;
  box-shadow:0 1px 2px rgba(4,52,40,.05),0 14px 34px rgba(4,52,40,.07)}
.ct__carte .tc__ico{margin:0 auto 18px}
.ct__mail{font-size:19px;font-weight:600;margin-bottom:20px;word-break:break-word}
.ct__btn{width:100%;justify-content:center}
.sec--contact .tc__legal{margin-top:30px}

@media (max-width:1024px){
  .tc__mesures{grid-template-columns:repeat(2,1fr)}
  .sec--iadark .tc__ais{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .tc__mesures{grid-template-columns:1fr}
  .sec--iadark .tc__ais{grid-template-columns:1fr}
  .sec--iadark{padding:52px 0 58px}
  .sec--iadark h2,.sec--contact h2{font-size:28px}
  .sec--contact{padding:48px 0 54px}
  .ct__carte{padding:26px 22px 28px;border-radius:24px}
}

/* le trefle qui habillait l'ancien bloc sombre suit la gouvernance IA */
.sec--iadark{position:relative;overflow:hidden}
.sec--iadark::before{content:"";position:absolute;width:520px;height:520px;
  left:-200px;bottom:-250px;background:var(--art-clover);background-size:contain;
  background-repeat:no-repeat;opacity:.13;transform:rotate(18deg);pointer-events:none}
.sec--iadark .wrap{position:relative;z-index:1}
@media (max-width:720px){.sec--iadark::before{width:340px;height:340px;left:-150px;bottom:-170px}}

/* ===================================================================
   TARIFS — paliers equipe et comparatif sur un an
   =================================================================== */
.tm__box{margin-top:30px;background:var(--menthe-pale);border-radius:28px;
  padding:26px 28px 28px;display:grid;grid-template-columns:minmax(220px,1fr) 1.6fr;
  gap:24px;align-items:center}
.tm__hd h3{font-size:20px;line-height:1.25;margin-bottom:6px}
.tm__hd p{font-size:14px;line-height:1.45}
.tm__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tm{background:#fff;border-radius:18px;padding:16px 14px;text-align:center}
.tm b{display:block;font-family:var(--corps);font-weight:600;font-size:24px;
  letter-spacing:-.02em;margin-bottom:4px}
.tm span{display:block;font-size:12.5px;line-height:1.3;color:#4A6B60}

.sec--cmp{padding:56px 0 64px}
.cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;
  margin-top:26px}
.cmp__col{display:flex;flex-direction:column;border-radius:30px;padding:28px 30px 26px}
.cmp__col--avant{background:var(--menthe-pale);color:#3A5A50}
.cmp__col--apres{background:var(--sapin);color:#fff}
.cmp__t{font-family:var(--corps);font-weight:600;letter-spacing:-.02em;font-size:20px;
  margin-bottom:18px}
.cmp__col--apres .cmp__t{color:var(--citron)}
.cmp__list{list-style:none;display:grid;gap:2px;margin-bottom:22px}
.cmp__list li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:12px 0;border-bottom:1px solid rgba(4,52,40,.1);font-size:14.5px;line-height:1.35}
.cmp__col--apres .cmp__list li{border-bottom-color:rgba(255,255,255,.12)}
.cmp__list b{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.cmp__col--apres .cmp__list b{color:var(--citron)}
.cmp__tot{margin-top:auto;padding-top:6px}
.cmp__tot b{display:block;font-family:var(--corps);font-weight:600;letter-spacing:-.02em;
  font-size:32px;line-height:1.1;font-variant-numeric:tabular-nums}
.cmp__tot span{display:block;font-size:13.5px;margin-top:5px;opacity:.75}
.cmp__col--apres .cmp__tot b{color:var(--citron)}
.cmp__col--apres .cmp__tot span{color:#B6D0C4;opacity:1}
.cmp__vs{align-self:center;width:52px;height:52px;border-radius:50%;background:var(--citron);
  color:var(--sapin);display:grid;place-items:center;font-size:14px;font-weight:700;
  letter-spacing:.06em}
.cmp__note{font-size:13px;margin-top:18px;text-align:center}

@media (max-width:980px){
  .tm__box{grid-template-columns:1fr}
  .cmp{grid-template-columns:1fr;gap:12px}
  .cmp__vs{justify-self:center;width:44px;height:44px;font-size:13px}
  .cmp__col{padding:24px 22px 22px;border-radius:26px}
  .cmp__tot b{font-size:28px}
}
@media (max-width:560px){
  .tm__grid{grid-template-columns:repeat(2,1fr)}
  .tm__box{padding:22px 20px 24px;border-radius:24px}
}

/* le titre du comparatif suit le centrage des autres sections de la page */
.sec--cmp .wrap{text-align:center}
.sec--cmp .cmp__col,.sec--cmp .cmp__note{text-align:left}
.sec--cmp .cmp__note{text-align:center}

/* --- volumes inclus : le chiffre qui monte avec le prix --- */
.plan__vol{display:grid;gap:9px;margin:4px 0 20px;padding:16px 0 2px;
  border-top:1px solid rgba(4,52,40,.1)}
.plan--hi .plan__vol{border-top-color:rgba(255,255,255,.16)}
.plan__vol > div{display:flex;align-items:baseline;gap:10px}
.plan__vol b{flex:none;min-width:52px;font-family:var(--corps);font-weight:600;
  letter-spacing:-.02em;font-size:21px;line-height:1;font-variant-numeric:tabular-nums}
.plan--hi .plan__vol b{color:var(--citron)}
.plan__vol span{font-size:13px;line-height:1.3;color:#4A6B60}
.plan--hi .plan__vol span{color:#B6D0C4}

/* une grille etiree repartirait l'espace libre entre les trois lignes : les
   volumes ne seraient plus a la meme hauteur d'une carte a l'autre */
.plan__vol{align-content:start}
.plan__vol b{min-width:60px}

/* ===================================================================
   NOTRE HISTOIRE — deux parties nettement separees
   Partie 1 : le parcours du recruteur, sur fond blanc.
   Partie 2 : Profilr, sur fond vert pale — c'est la rupture demandee.
   =================================================================== */
.part__hd{max-width:920px;margin-bottom:clamp(22px,2.6vw,36px)}
.part__k{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#6C8C80;margin-bottom:10px}
.part__t{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(27px,3.2vw,46px);line-height:1.08;max-width:20ch}
.part--2{background:var(--menthe-pale);
  padding-top:clamp(46px,5vw,78px);padding-bottom:clamp(46px,5vw,78px);
  margin-top:clamp(22px,2.6vw,40px)}
.part--2 .chap{border-top-color:rgba(4,52,40,.14)}
/* le premier chapitre suit l'entete de partie : c'est lui qui perd son filet */
.chap:first-child{border-top:1px solid rgba(4,52,40,.1)}
.part__hd + .chap{border-top:0}
.chap__b h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(22px,2.2vw,34px);line-height:1.12;margin-bottom:14px}

/* --- les dates, en deux groupes --- */
.jgrps{display:grid;gap:clamp(26px,3vw,44px);margin-top:26px;max-width:920px}
.jgrp__t{display:inline-flex;align-items:center;gap:9px;margin-bottom:6px;
  font-family:var(--corps);font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:#6C8C80}
.jgrp__t::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--citron);flex:none}
.jgrp .jalons{margin-top:0}

/* --- quatre convictions : deux par deux --- */
.convs{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.convs{grid-template-columns:1fr}}

/* --- la phrase de chacun, sous son role --- */
.mb__mot{margin-top:11px;font-size:14px;line-height:1.5;color:#3A5A50;
  padding-left:13px;border-left:2px solid var(--citron)}

/* ===================================================================
   FRISE CHRONOLOGIQUE — horizontale, pour casser le rythme vertical
   de la page. Le rail deborde volontairement des marges : on le fait
   defiler, les deux groupes se suivent, le trait de chaque groupe se
   dessine quand il entre dans le champ.
   =================================================================== */
.frise{margin-top:28px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  /* pas de scroll-snap : l'accrochage ramenait le premier jalon contre le
     bord et mangeait la marge qui l'aligne sur le titre de section */
  scrollbar-width:thin;scrollbar-color:var(--trait) transparent}
.frise::-webkit-scrollbar{height:8px}
.frise::-webkit-scrollbar-thumb{background:var(--trait);border-radius:100px}
.frise::-webkit-scrollbar-track{background:transparent}
.frise:focus-visible{outline:2px solid var(--sapin);outline-offset:4px;border-radius:12px}

/* la premiere date s'aligne sur le titre de section, la derniere respire */
.frise__in{display:flex;align-items:flex-start;gap:clamp(34px,4vw,64px);
  width:max-content;
  padding:6px max(24px,calc((100% - var(--maxw)) / 2 + 24px)) 22px}

.fgrp{position:relative}
.fgrp__t{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#6C8C80}
.fgrp__t::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--citron);flex:none}

/* le trait porte les jalons du groupe : il s'arrete donc avec le groupe,
   et la coupure entre « avant » et « apres » se voit sans rien ajouter */
.fgrp__items{position:relative;display:flex;gap:clamp(18px,2.2vw,34px)}
.fgrp__items::before{content:"";position:absolute;left:0;right:0;top:var(--axe);
  height:2px;margin-top:-1px;background:var(--trait);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.js-frise.on .fgrp__items::before{transform:scaleX(1)}

.fj{position:relative;width:clamp(186px,17vw,232px);flex:none;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i) * 90ms + 180ms)}
.js-frise.on .fj{opacity:1;transform:none}
/* l'axe suit exactement le centre des pastilles : hauteur de la date
   (interligne 1, donc = corps) + sa marge basse + le rayon de la pastille */
.fgrp__items{--axe:calc(clamp(22px,2vw,30px) + 18px + 6px)}
.fj__d{display:block;font-family:var(--corps);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(22px,2vw,30px);line-height:1;margin-bottom:18px;white-space:nowrap}
.fj__pt{display:block;width:13px;height:13px;border-radius:50%;background:var(--citron);
  box-shadow:0 0 0 4px #fff,0 0 0 5.5px var(--trait);
  margin-bottom:22px;transform:scale(0);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--i) * 90ms + 300ms)}
.js-frise.on .fj__pt{transform:scale(1)}
.fj__t{font-size:14.5px;line-height:1.45;color:#3A5A50}

@media (max-width:560px){
  .fj{width:clamp(172px,62vw,210px)}
  .frise__in{gap:30px;padding-left:24px;padding-right:24px}
}
@media (prefers-reduced-motion:reduce){
  .fj,.fj__pt,.fgrp__items::before{transition:none}
  .fj{opacity:1;transform:none}
  .fj__pt{transform:scale(1)}
  .fgrp__items::before{transform:scaleX(1)}
}

/* tant qu'il reste de la frise a droite, le bord s'estompe : c'est le seul
   indice qui dit « ça continue » sans ajouter de fleche a cliquer */
.frise--suite{-webkit-mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.15));
  mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.15))}

/* apres « Bientot » il n'y a plus de jalon : le trait s'efface au lieu de
   s'arreter net — la frise continue, on ne sait juste pas encore vers quoi */
.fgrp:last-child .fgrp__items::before{
  background:linear-gradient(90deg,var(--trait) 74%,rgba(195,208,204,0))}

/* un seul groupe dans la frise : sans libelle au-dessus, les dates
   remonteraient contre le titre de section */
.fgrp > .fgrp__items:first-child{margin-top:28px}

/* cinq jalons au lieu de huit : on les resserre juste assez pour que la
   frise entiere tienne a l'ecran sur ordinateur (1132 px utiles au maximum
   = 5 x 204 + 4 x 26). En dessous d'un millier de pixels, elle redefile. */
.fgrp__items{gap:clamp(18px,2vw,26px)}
.fj{width:clamp(176px,16vw,204px)}
@media (max-width:560px){.fj{width:clamp(172px,62vw,210px)}}

/* ===================================================================
   POUR QUI ? — trois publics, un bloc chacun
   Le bloc du milieu est sombre : trois cartes claires a la suite se
   lisent comme une liste, pas comme trois profils distincts.
   =================================================================== */
.sec--pq-head{padding:clamp(26px,3vw,46px) 0 0}
.sec--pqs{padding:clamp(26px,3vw,40px) 0 clamp(40px,5vw,70px)}
.sec--pqs .wrap{display:grid;gap:clamp(18px,2.2vw,26px)}

.pq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,54px);
  background:var(--menthe-pale);border-radius:36px;
  padding:clamp(28px,3.4vw,46px) clamp(24px,3vw,44px)}
.pq__l{display:flex;flex-direction:column;align-items:flex-start}
.pq .chip{background:none;padding:0;font-size:22px;color:var(--sapin);
  font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.pq h2{font-size:clamp(23px,2.2vw,32px);line-height:1.12;margin-bottom:14px}
.pq__phrase{font-size:clamp(17px,1.5vw,21px);line-height:1.35;font-weight:600;
  margin-bottom:12px;max-width:26ch}
.pq__p{font-size:15.5px;line-height:1.55;color:#3A5A50;margin-bottom:18px;max-width:40ch}
.pq__franc{font-size:14.5px;line-height:1.5;color:#3A5A50;margin-bottom:20px;
  padding-left:14px;border-left:2px solid var(--citron);max-width:40ch}
.pq__l .btn{margin-top:auto}

.pq__pts{list-style:none;display:grid;gap:11px;margin-bottom:24px}
.pq__pts li{display:flex;gap:11px;font-size:15px;line-height:1.45}
.pq__kpis{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.pq__kpi{background:#fff;border-radius:20px;padding:18px 20px}
.pq__kpi b{display:block;font-family:var(--corps);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(22px,2vw,28px);line-height:1.05;margin-bottom:5px;
  font-variant-numeric:tabular-nums}
.pq__kpi span{display:block;font-size:12.5px;line-height:1.35;color:#4A6B60}
.pq__q blockquote{font-size:15px;line-height:1.55;color:#3A5A50;margin-bottom:12px}
.pq__q blockquote::before{content:"\201C"}
.pq__q blockquote::after{content:"\201D"}
.pq__q figcaption b{font-weight:600;font-size:14.5px}
.pq__q figcaption span{display:block;font-size:13px;color:#4A6B60;margin-top:2px}

/* --- le bloc sombre --- */
.pq--sombre{background:var(--sapin);color:#fff}
.pq--sombre h2,.pq--sombre .chip{color:var(--citron)}
.pq--sombre .pq__p,.pq--sombre .pq__franc,
.pq--sombre .pq__q blockquote{color:#B6D0C4}
.pq--sombre .pq__kpi{background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(223,255,165,.14)}
.pq--sombre .pq__kpi b{color:var(--citron)}
.pq--sombre .pq__kpi span,.pq--sombre .pq__q figcaption span{color:#B6D0C4}
.pq--sombre .ck{color:var(--citron);opacity:1}

/* --- la fin de page prend deux boutons --- */
.prcta__p{font-size:16.5px;line-height:1.55;color:#B6D0C4;max-width:52ch;
  margin:-14px auto 26px}
.prcta__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.prcta__btns .btn{margin:0}

@media (max-width:900px){
  .pq{grid-template-columns:1fr;border-radius:30px}
  .pq__l .btn{margin-top:4px}
}
@media (max-width:460px){
  .pq__kpis{grid-template-columns:1fr}
}

/* le bouton suit le texte : cale en bas de carte, il laissait un trou de
   200 px au milieu du premier bloc, dont la colonne gauche est courte */
.pq__l .btn{margin-top:8px}

/* --- logos clients : images portees par la feuille, pas par le balisage --- */
.marq__l{display:block;height:44px;flex:none;background-repeat:no-repeat;
  background-position:center;background-size:contain;
  /* Les logos clients etaient desatures a 62 % d'opacite, convention
     habituelle des murs de references. Alexis les veut en couleurs :
     ce sont ses clients, pas un decor. */
  transition:opacity .2s}
.marq__l--teaminside{width:123px}
.marq__l--astree{width:161px}
.marq__l--systra{width:230px}
.marq__l--monsieurguiz{width:157px}
.marq__l--4cad{width:104px}
.marq__l--blueway{width:134px}
.marq__l--humanskills{width:338px}
.marq__l--sib{width:52px}
.marq__l--wakeo{width:250px}
.marq__l--lelabrh{width:59px}
.marq__l--opensourcing{width:242px}
.marq__l--aia{width:82px}

/* le portrait de la section « promesse » : 4/5 plutot que carre, pour que
   le buste tienne dans le cadre */
.promise__img{aspect-ratio:4/5}
@media (max-width:900px){.promise__img{max-width:380px}}

/* --- vignettes d'integration : images portees par la feuille --- */
.tool{display:block;flex:none;border-radius:26px;background:#fff;
  background-repeat:no-repeat;background-position:center;background-size:cover;
  width:clamp(96px,9.4vw,176px);height:clamp(96px,9.4vw,176px);
  margin-right:clamp(14px,1.5vw,26px);
  box-shadow:0 1px 2px rgba(4,52,40,.05),0 8px 22px rgba(4,52,40,.05)}
.integ__note{max-width:62ch;margin:26px auto 0;text-align:center;
  font-size:15px;line-height:1.55}

/* --- page FAQ complete --- */
.sec--fq-head{padding:clamp(26px,3vw,46px) 0 0}
.sec--fq{padding:clamp(22px,2.6vw,36px) 0 clamp(40px,5vw,70px)}
.sec--fq .wrap{display:grid;gap:clamp(30px,3.4vw,52px);max-width:900px}
.fq__grp h2{font-size:clamp(21px,2vw,28px);line-height:1.15;margin-bottom:14px;
  padding-bottom:12px;border-bottom:2px solid var(--citron)}
.fq__list{display:grid}

/* la page FAQ reprend exactement l'accordeon de l'accueil : meme composant,
   deux emplacements — le fond est blanc ici, donc les pastilles le sont
   aussi, posees sur un vert tres pale */
.fq__list{display:grid;gap:10px}
.fq__list details{background:var(--menthe-pale);border-radius:100px;padding:4px 26px;
  transition:border-radius .2s}
.fq__list details[open]{border-radius:30px;padding-bottom:8px}
.fq__list summary{list-style:none;cursor:pointer;padding:18px 0;font-size:15px;
  font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:18px}
.fq__list summary::-webkit-details-marker{display:none}
.fq__list summary::after{content:"+";width:30px;height:30px;border-radius:50%;background:#fff;
  display:grid;place-items:center;font-size:18px;font-weight:400;flex:none;
  transition:transform .2s}
.fq__list details[open] summary::after{transform:rotate(45deg)}
.fq__list details p{padding:0 0 16px;font-size:14.5px;line-height:1.5;color:#26433B;
  max-width:74ch}
@media (prefers-reduced-motion:reduce){
  .fq__list details,.fq__list summary::after{transition:none}
}

/* ===================================================================
   INTEGRATIONS — Profilr au centre, les familles d'outils autour.
   Quatre cartes aux quatre coins, le noeud au milieu, des pointilles
   qui relient. Sous 940 px la grille se deplie en colonne et le noeud
   repasse en tete : une composition radiale ne tient pas sur un
   telephone, et la forcer donnerait des cartes de 120 px de large.
   =================================================================== */
.imap{display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,1.6vw,22px) clamp(20px,3vw,52px);
  align-items:stretch;margin-top:clamp(36px,4vw,60px)}
.imap .igrp:nth-child(1){grid-area:1 / 1}
.imap .igrp:nth-child(2){grid-area:1 / 3}
.imap .igrp:nth-child(3){grid-area:2 / 1}
.imap .igrp:nth-child(4){grid-area:2 / 3}
.imap__src{grid-area:1 / 2 / 3 / 3;display:grid;place-items:center;position:relative}

/* les anneaux : la galaxie, suggeree plutot que dessinee */
.imap__src::before,.imap__src::after{content:"";position:absolute;
  border-radius:50%;border:2px dotted var(--trait);opacity:.75}
.imap__src::before{width:clamp(150px,15vw,208px);aspect-ratio:1}
.imap__src::after{width:clamp(212px,21vw,292px);aspect-ratio:1;opacity:.45}
.imap__node{position:relative;z-index:1;display:inline-flex;flex-direction:column;
  align-items:center;gap:7px;background:#fff;border-radius:50%;
  width:clamp(96px,9.6vw,132px);height:clamp(96px,9.6vw,132px);
  justify-content:center;
  box-shadow:0 1px 2px rgba(4,52,40,.06),0 14px 34px rgba(4,52,40,.1)}
.imap__node svg{width:clamp(26px,2.6vw,34px);height:clamp(26px,2.6vw,34px);
  color:var(--sapin)}
.imap__node b{font-family:var(--corps);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(14px,1.3vw,17px)}

.igrp{position:relative;background:#fff;border-radius:24px;
  padding:18px clamp(16px,1.8vw,24px) 16px;
  box-shadow:0 1px 2px rgba(4,52,40,.05),0 8px 22px rgba(4,52,40,.05)}
/* le trait part de la carte vers le centre */
.igrp::before{content:"";position:absolute;top:50%;
  width:clamp(20px,3vw,52px);border-top:2px dotted var(--trait)}
.imap .igrp:nth-child(1)::before,.imap .igrp:nth-child(3)::before{
  left:100%}
.imap .igrp:nth-child(2)::before,.imap .igrp:nth-child(4)::before{
  right:100%}
.igrp__t{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#6C8C80;margin-bottom:14px}
.igrp__logos{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(13px,1.6vw,24px)}
.ilogo{display:block;height:28px;flex:none;background-repeat:no-repeat;
  background-position:center;background-size:contain}
/* « et plus » : la liste n'est pas une limite */
.igrp__plus{flex:none;font-size:13px;font-weight:600;color:#6C8C80;
  padding:5px 12px;border-radius:100px;background:var(--menthe-pale)}

@media (max-width:940px){
  .imap{grid-template-columns:1fr;gap:14px}
  .imap .igrp:nth-child(1),.imap .igrp:nth-child(2),
  .imap .igrp:nth-child(3),.imap .igrp:nth-child(4){grid-area:auto}
  .imap__src{grid-area:auto;order:-1;margin-bottom:22px}
  .igrp::before{display:none}
  .ilogo{height:24px}
}

/* largeur propre a chaque marque, deduite de son rapport */
.ilogo--ashby{width:28px}
@media (max-width:860px){.ilogo--ashby{width:24px}}
.ilogo--bamboohr{width:183px}
@media (max-width:860px){.ilogo--bamboohr{width:157px}}
.ilogo--bullhorn{width:34px}
@media (max-width:860px){.ilogo--bullhorn{width:29px}}
.ilogo--claude{width:28px}
@media (max-width:860px){.ilogo--claude{width:24px}}
.ilogo--ezekia{width:195px}
@media (max-width:860px){.ilogo--ezekia{width:167px}}
.ilogo--gemini{width:123px}
@media (max-width:860px){.ilogo--gemini{width:106px}}
.ilogo--greenhouse{width:14px}
@media (max-width:860px){.ilogo--greenhouse{width:12px}}
.ilogo--hubspot{width:97px}
@media (max-width:860px){.ilogo--hubspot{width:83px}}
.ilogo--icims{width:92px}
@media (max-width:860px){.ilogo--icims{width:79px}}
.ilogo--jobadder{width:111px}
@media (max-width:860px){.ilogo--jobadder{width:95px}}
.ilogo--loxo{width:19px}
@media (max-width:860px){.ilogo--loxo{width:16px}}
.ilogo--mistral{width:31px}
@media (max-width:860px){.ilogo--mistral{width:26px}}
.ilogo--openai{width:28px}
@media (max-width:860px){.ilogo--openai{width:24px}}
.ilogo--oracle{width:219px}
@media (max-width:860px){.ilogo--oracle{width:187px}}
.ilogo--recruitcrm{width:140px}
@media (max-width:860px){.ilogo--recruitcrm{width:120px}}
.ilogo--salesforce{width:40px}
@media (max-width:860px){.ilogo--salesforce{width:34px}}
.ilogo--sap-successfactors{width:52px}
@media (max-width:860px){.ilogo--sap-successfactors{width:45px}}
.ilogo--teamtailor{width:28px}
@media (max-width:860px){.ilogo--teamtailor{width:24px}}
.ilogo--vincere{width:128px}
@media (max-width:860px){.ilogo--vincere{width:110px}}
.ilogo--workday{width:70px}
@media (max-width:860px){.ilogo--workday{width:60px}}
/* la section est centree ; les cartes, elles, se lisent de gauche a droite */
.imap,.igrp,.igrp__t,.igrp__logos{text-align:left}
/* la section borne ses paragraphes a 44ch et les centre par margin:auto —
   ce n'etait pas l'alignement du texte qui decalait les libelles de carte,
   c'etait la boite elle-meme */
.sec--integ .imap .igrp__t{max-width:none;margin:0 0 14px;text-align:left}
.sec--integ .imap .igrp__logos{justify-content:flex-start}

/* la colonne centrale reserve la place du plus grand anneau : sans cela il
   deborde sur les cartes, qui sont dessinees avant lui */
.imap__src{width:clamp(212px,21vw,292px);justify-self:center}
.imap__src::before,.imap__src::after{pointer-events:none}
/* le bouton a quitte la section : son espace de pied aussi */
.sec--integ{padding-bottom:clamp(70px,7vw,110px)}

/* le trefle seul, recadre depuis le logo complet */
.imap__mark{display:block;width:clamp(30px,3vw,40px);aspect-ratio:89/95;
  background:url(/assets/img/imap-mark.svg) center/contain no-repeat}

/* --- lisibilite de la carte des integrations ---------------------------
   Cartes blanches sur fond quasi blanc, ombres a 5 % et libelles a
   #6C8C80 : l'ensemble se dissolvait, surtout a droite ou le degrade de
   section est le plus clair. On remonte le contraste des trois. */
.igrp{box-shadow:inset 0 0 0 1px rgba(4,52,40,.08),
  0 2px 4px rgba(4,52,40,.05),0 14px 32px rgba(4,52,40,.09)}
.igrp__t{color:var(--sapin-80)}
.igrp__plus{color:var(--sapin-80);background:var(--menthe)}
.imap__node{box-shadow:inset 0 0 0 1px rgba(4,52,40,.07),
  0 2px 6px rgba(4,52,40,.07),0 18px 40px rgba(4,52,40,.13)}

/* Le conteneur .tools portait le masque d'estompe de l'ancienne bande
   defilante : opaque de 9 % a 91 %, transparent aux deux bords. Les cartes
   ayant remplace la bande, ce masque effacait leurs bords — le libelle
   « ATS » a gauche, toute la colonne de droite. Il n'a plus d'objet. */
.tools{-webkit-mask-image:none;mask-image:none}

/* L'ecart entre le chapo et la carte des integrations etait calibre pour la
   bande defilante, qui avait besoin d'air pour ne pas sembler coller au
   texte. Les cartes, elles, forment un bloc : 86 px au-dessus creusaient un
   vide au milieu de la section. Specificite superieure a `.tools`, donc
   valable aussi dans les media queries declarees plus haut. */
.sec--integ .tools{margin-top:clamp(34px,3.2vw,60px)}

/* La note se posait a 26 px sous la carte : calibre pour la bande defilante,
   beaucoup trop serre sous des cartes dont le bord bas est net. Elle avait
   l'air collee au graphique. */
.sec--integ .integ__note{margin-top:clamp(40px,3.8vw,68px)}

/* =======================================================================
   PAQUET DE CARTES — CENTRAGE VERTICAL DU BLOC EPINGLE
   La carte est plafonnee a 560 px et collee a 96 px du haut. Sur un ecran
   court, elle remplit la fenetre. Sur un ecran haut, elle s'arrete a 656 px
   et tout le reste — jusqu'a 800 px — tombe EN DESSOUS, puisque l'ancrage
   est en haut. D'ou le desequilibre signale par Alexis le 13 octobre.
   On repartit ce blanc des deux cotes : `top` devient la moitie de l'espace
   libre, avec un plancher a 96 px pour ne jamais passer sous la barre de
   navigation sur un ecran court (ou la formule donnerait 70 px).
   La hauteur passe par une variable pour que `top` puisse la soustraire.
   ===================================================================== */
.deck__pin{
  --dk-h:min(calc(100svh - 140px),560px);
  height:var(--dk-h);
  top:max(96px,calc((100svh - var(--dk-h)) / 2));
}
/* Ces deux regles arrivent apres les media queries d'origine : sans les
   redeclarer ici, `height:var(--dk-h)` ecraserait le `height:auto` de la
   liste verticale sur telephone et en mouvement reduit. */
@media (max-width:900px){
  .deck__pin{height:auto}
}
@media (prefers-reduced-motion:reduce){
  .deck__pin{height:auto}
}

/* =======================================================================
   PAQUET DE CARTES — L'ECHELLE NE DOIT PLUS GRANDIR QUAND LA CARTE, ELLE,
   NE GRANDIT PLUS
   La carte est large de `min(1264px, 100% - 56px)` et haute de 560 px au
   plus : au-dela de 1320 px de fenetre, sa boite est FIGEE. Or le titre,
   les lignes et l'illustration etaient dimensionnes en `vw`, donc ils
   continuaient de grossir avec l'ecran. A 1680 px le contenu depassait deja
   de 63 px, a 1920 la troisieme ligne passait sous le bord — exactement ce
   qu'Alexis voit le 13 octobre sur la carte 04, dont le titre anglais tient
   sur trois lignes.
   On plafonne chaque valeur a ce qu'elle vaut a 1440 px, mesure ou le
   contenu laisse encore 85 px de marge dans une carte de taille identique.
   Au-dessus, le rendu est donc strictement celui de 1440 px. En dessous de
   1320 px la carte suit la fenetre et les `vw` restent le bon pilote.
   ===================================================================== */
.dcard__in{gap:clamp(26px,2.6vw,37px);padding:clamp(30px,2.8vw,40px)}
.dcard__n{font-size:clamp(13px,.85vw,13px);margin-bottom:clamp(10px,.9vw,13px)}
.dcard h3{font-size:clamp(34px,4.4vw,63px)}
.dcard li{font-size:clamp(16px,1.45vw,21px);gap:clamp(10px,.8vw,12px)}
.dcard .tg{width:clamp(32px,2.3vw,33px);height:clamp(18px,1.3vw,19px)}
.dcard .tg::after{width:clamp(13px,.9vw,13px);height:clamp(13px,.9vw,13px)}
.dcard__media .ph{max-width:clamp(240px,30vw,432px)}
.dcard__svg{max-width:clamp(240px,30vw,432px)}

/* Redeclaration obligatoire : le bloc ci-dessus arrive apres la media query
   des ecrans etroits, ou les cartes deviennent une liste avec leurs propres
   tailles. Sans ces lignes, il l'ecraserait. */
@media (max-width:900px){
  .dcard__in{padding:32px 26px 34px;gap:26px}
  .dcard h3{font-size:30px}
  .dcard li{font-size:16px}
}

/* =======================================================================
   FOND BLANC + FORMES GEOMETRIQUES SUR TOUTE LA LANDING
   Decision d'Alexis, 13 octobre : le traitement du hero — du blanc, et le
   trace du logo en tres grand qui deborde des bords — devient la regle de
   toute la page. On retire donc les aplats et les degrades qui servaient
   jusqu'ici a separer les sections, et c'est la forme, sa taille et sa
   position qui donnent le rythme.
   Ce qui reste colore : les ELEMENTS (les cinq cartes de l'enchainement,
   le panneau sombre des agents, les temoignages, le pied de page). Seuls
   les FONDS disparaissent.
   ===================================================================== */

/* --- 1 · les aplats et degrades de section ---------------------------- */
.sec--integ{background:none}          /* ellipse citron derriere la carte  */
.sec--plans{background:none}          /* degrade citron-pale vers blanc    */
.sec--contact{background:none}        /* aplat bleu #EEF2FB                */
.faq{background:none}                 /* panneau dragee a coins arrondis   */

/* Deux blocs etaient blancs SUR un fond colore : sur du blanc ils
   disparaissaient. Ils reprennent leur contour au trait. */
.plan{box-shadow:inset 0 0 0 1px rgba(4,52,40,.10)}
.faq details{box-shadow:inset 0 0 0 1px rgba(4,52,40,.10)}

/* --- 2 · le calque de trait, etendu a toute la page ------------------- */
/* `.deco` d'origine coupe avec overflow:hidden, ce qui transformerait la
   section en conteneur de defilement et casserait tout `position:sticky`
   a l'interieur (l'en-tete du comparatif, le paquet de cartes). `clip`
   coupe sans creer ce conteneur. Si le navigateur ne le connait pas, on
   masque le decor plutot que de risquer une barre horizontale. */
.sec--turn,.sec--promise,.sec--agents,.sec--integ,.sec--plans,
.sec--wall,.sec--quotes,.sec--contact,.faq.deco{overflow:clip}

.dc-tr::before,.dc-cl::before,.dc-br::before,.dc-cr::before,.dc-tl2::before,
.dc-cl2::before,.dc-tr2::before,.dc-bl::before,.dc-tr3::before{
  background-repeat:no-repeat;background-size:contain}

/* trefle — le logo complet, 1082 x 1083 */
.dc-tr::before {background-image:var(--art-clover);width:720px;height:721px;
  right:-280px;top:-220px;transform:rotate(14deg);opacity:.34}
.dc-br::before {background-image:var(--art-clover);width:980px;height:981px;
  right:-400px;bottom:-380px;transform:rotate(-20deg);opacity:.26}
.dc-tl2::before{background-image:var(--art-clover);width:640px;height:641px;
  left:-260px;top:-180px;transform:rotate(-8deg);opacity:.36}
.dc-tr2::before{background-image:var(--art-clover);width:560px;height:561px;
  right:-200px;top:-140px;transform:rotate(22deg);opacity:.32}
.dc-tr3::before{background-image:var(--art-clover);width:1000px;height:1001px;
  right:-380px;top:-300px;transform:rotate(-16deg);opacity:.28}

/* capsule — la forme de l'interrupteur, 1461 x 654, donc h = w x .4476 */
/* La capsule n'est qu'un contour : coupee par le bord, il n'en reste que
   deux traits horizontaux, et elle disparait. Il lui faut traverser la
   section en entier, ses deux bouts arrondis compris. */
.dc-cl::before {background-image:var(--art-caps);width:1240px;height:555px;
  left:-180px;top:-60px;transform:rotate(-7deg);opacity:.34}
.dc-cr::before {background-image:var(--art-caps);width:1300px;height:582px;
  right:-220px;top:60px;transform:rotate(8deg);opacity:.30}
.dc-cl2::before{background-image:var(--art-caps);width:1100px;height:492px;
  left:-200px;bottom:-120px;transform:rotate(10deg);opacity:.34}
.dc-bl::before {background-image:var(--art-caps);width:1180px;height:528px;
  left:-240px;bottom:-160px;transform:rotate(-9deg);opacity:.32}

@supports not (overflow:clip){
  .dc-tr::before,.dc-cl::before,.dc-br::before,.dc-cr::before,.dc-tl2::before,
  .dc-cl2::before,.dc-tr2::before,.dc-bl::before,.dc-tr3::before{display:none}
}
/* Sur telephone, un trace de 900 px sous un texte de 320 px de large n'est
   plus un rythme, c'est du bruit. On reduit et on allege. */
@media (max-width:760px){
  .dc-tr::before,.dc-cl::before,.dc-br::before,.dc-cr::before,.dc-tl2::before,
  .dc-cl2::before,.dc-tr2::before,.dc-bl::before,.dc-tr3::before{
    scale:.52;opacity:.22}
}

/* =======================================================================
   DEUX GRANDES CARTES, PUIS TROIS COLONNES
   Brief Alexis du 13 octobre : les cinq cartes faisaient defiler cinq
   ecrans avant d'arriver aux agents, qui sont le sommet de la page. Les
   deux differenciateurs — les mandats et le sourcing — gardent leur carte
   pleine. Les trois dernieres etapes racontent toutes l'apres-contact :
   elles tiennent en trois colonnes.
   ===================================================================== */

/* --- la carte : un titre, une phrase ---------------------------------- */
.dcard__p{font-size:clamp(17px,1.6vw,23px);line-height:1.42;max-width:26em;
  margin:clamp(20px,2.2vw,32px) 0 0}
/* Le bloc reste centre verticalement : avec une seule phrase il tombait
   tout en haut, et la moitie basse de la carte restait vide face a une
   illustration, elle, centree. */
.dcard__txt{justify-content:center}
.dcard__hd{flex:none}

/* --- les trois colonnes ----------------------------------------------- */
.sec--trio{padding:clamp(70px,7vw,120px) 0 clamp(50px,5vw,80px)}
.tri__n{font-family:var(--corps);font-weight:500;font-size:clamp(14px,1.1vw,18px);
  letter-spacing:.07em;color:#8AA39A;display:block;margin-bottom:clamp(10px,1vw,16px)}
.sec--trio h2{font-size:clamp(30px,3.5vw,58px);line-height:1.02;letter-spacing:-.028em;
  max-width:16em}
.tris{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,34px);
  margin-top:clamp(36px,3.6vw,60px);align-items:start}
.tri{background:var(--menthe-pale);border-radius:28px;padding:clamp(18px,1.6vw,26px);
  box-shadow:inset 0 0 0 1px rgba(4,52,40,.07)}
/* Le recadrage est le meme pour les trois dessins : en imposant le rapport
   ici, les trois vignettes s'alignent au pixel quelle que soit la largeur. */
.tri__vis{aspect-ratio:802 / 524;border-radius:18px;overflow:hidden;background:#fff}
.tri__vis svg{display:block;width:100%;height:100%}
.tri__t{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.02em;
  font-size:clamp(19px,1.7vw,27px);margin:clamp(16px,1.5vw,24px) 0 0}
.tri__p{font-size:clamp(15px,1.15vw,18px);line-height:1.4;color:#3A5A50;
  margin:clamp(7px,.7vw,11px) 0 0}
@media (max-width:860px){
  .tris{grid-template-columns:1fr;gap:14px}
  .sec--trio h2{max-width:none}
}

/* =======================================================================
   INTEGRATIONS — RETOUR A LA COMPOSITION DE LA LANDING WEBFLOW
   Alexis, 13 octobre : il prefere la couronne de vignettes de l'ancienne
   page a la carte radiale. Le titre, les deux phrases et le bouton
   occupent la bande centrale ; les logos gravitent autour, poses en
   absolu par leur centre (--g et --h, en % du bloc).
   ===================================================================== */
/* Rembourrage symetrique : l'ellipse est centree sur le milieu du bloc, il
   faut donc autant de place au-dessus qu'en dessous pour les vignettes
   hautes et basses. */
.gal{position:relative;display:grid;place-items:center;
  padding:clamp(70px,7vw,110px) 0;
  min-height:clamp(640px,58vw,900px)}
/* La couronne occupe toute la largeur de la fenetre, pas seulement la
   colonne de 1264 px : c'est ce qui permet d'elargir le bloc de texte sans
   que les vignettes viennent le toucher. La section coupe a `clip`, donc
   ce debordement ne cree aucune barre horizontale. */
.gal__l{position:absolute;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;
  pointer-events:none}
/* 64 % du conteneur, plafonne a 880 px. Avec une couronne qui s'etale sur
   toute la fenetre, la bande libre fait au moins 19 % de chaque cote de
   1024 a 2560 px, et le titre tient sur deux lignes equilibrees plutot que
   de laisser un mot seul sur sa ligne. */
.gal__txt{position:relative;z-index:2;max-width:min(880px,64%);text-align:center}
.gal__txt h2{text-wrap:balance}
/* 46ch laissait les deux phrases bien plus etroites que le titre : le
   bloc ne se lisait plus comme une seule colonne. */
.gal__txt p{max-width:58ch;margin-inline:auto}
.gal__cta{margin-top:clamp(22px,2.4vw,34px)}

/* Les vignettes sont posees sur une ELLIPSE autour du bloc de texte : leur
   angle arrive en cosinus et sinus, multiplies ici par les deux rayons.
   Le rayon horizontal se resserre sur un ecran etroit pour qu'aucune
   vignette ne sorte du cadre ; le vertical suit la hauteur du bloc. */
/* 520 x 300 laissait 3 px entre une vignette diagonale et le titre sur un
   ecran de 2000 px, ou le titre monte a 72 px. Les deux rayons sont
   elargis ; la marge la plus serree passe a une soixantaine de pixels. */
.gall{--rx:min(570px,calc(50vw - 58px));--ry:clamp(250px,25vw,350px);
  position:absolute;
  left:calc(50% + var(--rx) * var(--cx) * var(--f));
  top:calc(50% + var(--ry) * var(--cy) * var(--f));
  translate:-50% -50%;
  width:clamp(54px,5.6vw,88px);aspect-ratio:1;border-radius:clamp(14px,1.5vw,22px);
  display:grid;place-items:center;background:#fff;
  box-shadow:0 10px 26px rgba(4,52,40,.10),inset 0 0 0 1px rgba(4,52,40,.06)}
/* Teamtailor et Ashby SONT deja un carre de couleur : une carte blanche
   autour ajouterait un cadre dans un cadre. Le logo remplit la vignette. */
.gall--plein{background:none;box-shadow:0 10px 26px rgba(4,52,40,.14);overflow:hidden}
.gall--plein .ilogo{width:100%;height:100%;background-size:cover;border-radius:inherit}
.gall .ilogo{width:62%;height:62%;background-size:contain;background-position:center}

@media (max-width:900px){
  /* En colonne etroite, le texte prend toute la largeur : il n'y a plus de
     bande libre sur les cotes, et une couronne en absolu passe forcement
     derriere le titre. Les vignettes redeviennent une simple rangee, au
     dessus du texte. */
  .gal{min-height:0;padding:36px 0 10px}
  .gal__l{position:static;display:flex;flex-wrap:wrap;justify-content:center;
    gap:10px;margin-bottom:26px}
  .gal__txt{max-width:none}
  .gall{position:static;translate:none;width:58px}
  .gall:nth-child(n+9){display:none}
}

/* =======================================================================
   « D'UNE OFFRE PUBLIEE A UN PLACEMENT SIGNE »
   Prototype d'Alexis du 13 octobre. Un sommaire numerote a gauche, un
   panneau illustre a droite, six etapes. Cette section remplace a elle
   seule les deux grandes cartes, les trois colonnes et l'ancien bloc des
   agents.
   ===================================================================== */
.sec--parc{padding:clamp(70px,7vw,120px) 0 clamp(50px,5vw,80px)}
.pcx{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:clamp(14px,1.4vw,20px)}
/* Le badge est colle au surtitre, donc lu AVANT le premier panneau : le
   visiteur sait que le scenario est une demonstration, pas un cas client. */
.pcx__b{font-size:12.5px;font-weight:600;color:#4A6B62;background:var(--menthe-pale);
  padding:5px 12px;border-radius:100px;box-shadow:inset 0 0 0 1px rgba(4,52,40,.07)}
.sec--parc h2{font-size:clamp(32px,4.4vw,64px);line-height:1;letter-spacing:-.03em;
  max-width:14em}
.pc__lede{max-width:46em;margin-top:clamp(14px,1.4vw,22px)}

.parc{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(20px,2.4vw,42px);margin-top:clamp(34px,3.6vw,58px);align-items:start}

/* --- le sommaire ------------------------------------------------------ */
.parc__nav{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pcb{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;
  padding:13px 16px;border-radius:20px;background:none;color:var(--sapin);
  transition:background .22s ease,color .22s ease}
.pcb__n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;
  place-items:center;font-size:13.5px;font-weight:600;background:var(--menthe-pale);
  color:#4A6B62;transition:background .22s ease,color .22s ease}
.pcb__x{min-width:0}
.pcb__x b{font-family:var(--corps);font-weight:500;font-size:clamp(16px,1.25vw,19px);
  line-height:1.2;display:block}
/* La phrase n'apparait que sur l'etape courante : six phrases en meme
   temps feraient un mur de texte a cote du panneau. */
.pcb__d{display:none;font-size:14px;line-height:1.36;margin-top:5px;color:#B6D0C4}
.pcb.is-on{background:var(--sapin);color:#fff}
.pcb.is-on .pcb__n{background:var(--citron);color:var(--sapin)}
.pcb.is-on .pcb__d{display:block}
.pcb:not(.is-on):hover{background:var(--menthe-pale)}

/* --- la scene --------------------------------------------------------- */
.parc__pans{display:grid}
.pc{grid-area:1 / 1;border-radius:34px;padding:clamp(24px,2.6vw,42px);
  transition:opacity .34s ease;min-height:clamp(380px,32vw,470px);
  display:flex;flex-direction:column;justify-content:center;gap:12px}
.pc[aria-hidden="true"]{opacity:0;pointer-events:none}
.pc--citron{background:var(--citron)} .pc--lin{background:var(--lin)}
.pc--dragee{background:var(--dragee)} .pc--sapin{background:var(--sapin);color:#fff}
.pc__lab{font-size:13.5px;font-weight:600;opacity:.72;margin:0}
.pc__pied{font-size:13.5px;opacity:.68;margin:0}
.pc__c{background:#fff;border-radius:22px;padding:clamp(16px,1.5vw,22px);
  display:grid;gap:12px}
.pc__c--liste{gap:8px}

.pc__soc{display:flex;align-items:center;gap:13px;padding-bottom:14px;
  border-bottom:1px solid var(--trait)}
.pc__logo{flex:none;width:44px;height:44px;border-radius:13px;background:var(--sapin);
  color:var(--citron);display:grid;place-items:center;font-family:var(--corps);
  font-weight:600;font-size:19px}
.pc__socn{min-width:0;flex:1}
.pc__socn b,.pc__persn b{display:block;font-size:15.5px;font-weight:700;line-height:1.25}
.pc__socn span,.pc__persn span{display:block;font-size:13px;color:#4A6B62;margin-top:2px}
.pc__tag{flex:none;background:var(--sapin);color:#fff;font-size:12.5px;font-weight:600;
  padding:5px 13px;border-radius:100px}
.pc__off b{display:block;font-family:var(--corps);font-weight:500;font-size:19px}
.pc__off > span{display:block;font-size:13px;color:#4A6B62;margin-top:3px}
.pc__srcs{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.pc__src{font-size:12.5px;color:#3A5A50;background:var(--menthe-pale);
  padding:5px 11px;border-radius:100px}

.pc__pers{display:flex;align-items:center;gap:13px}
.pc__av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--lin);
  display:grid;place-items:center;font-size:14px;font-weight:700;color:#3C3357}
.pc__av--s{width:38px;height:38px;font-size:12.5px;background:var(--dragee);color:#24415F}
.pc__champ{display:flex;align-items:center;gap:12px;background:var(--citron);
  border-radius:16px;padding:12px 16px}
.pc__champ > span:first-child{flex:1;min-width:0}
.pc__champ b{display:block;font-size:12.5px;font-weight:700}
.pc__champ span span{display:block;font-size:14.5px;margin-top:2px;
  overflow-wrap:anywhere}
.pc__ck{flex:none;width:22px;height:22px;color:var(--sapin)}
.pc__ck svg{width:100%;height:100%}

.pc__bulle{max-width:78%;border-radius:20px;padding:15px 19px;font-size:14.5px;
  line-height:1.42}
.pc__bulle--nous{margin-left:auto;background:var(--sapin);color:#fff}
.pc__bulle--eux{background:#fff}
.pc__bulle--eux b{display:block;font-size:13px;margin-bottom:3px}
.pc__valide{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  background:var(--citron);color:var(--sapin);font-size:13.5px;font-weight:600;
  padding:8px 16px;border-radius:100px;margin:0}
.pc__valide svg{width:16px;height:16px;flex:none}

.pc__prof{display:flex;align-items:center;gap:12px;background:var(--menthe-pale);
  border-radius:16px;padding:10px 14px}
.pc__prof .pc__persn{flex:1;min-width:0}
.pc__score{flex:none;background:var(--citron);font-size:13px;font-weight:700;
  padding:5px 12px;border-radius:100px}

.pc__seq{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;
  padding:13px 17px}
.pc__seq--rep{background:var(--sapin);color:#fff}
.pc__seq--rep .pc__persn span{color:#B6D0C4}
.pc__etat{flex:none;font-size:12.5px;color:#4A6B62}
.pc__etat--rep{background:var(--citron);color:var(--sapin);font-weight:600;
  padding:5px 13px;border-radius:100px}

.pc__h3{font-family:var(--display);font-weight:500;line-height:1.04;letter-spacing:-.024em;
  font-size:clamp(24px,2.6vw,40px);margin:0}
.pc__sous{font-size:14.5px;color:#B6D0C4;margin:0}
.pc__tuiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.pc__tuile{background:rgba(255,255,255,.07);border-radius:18px;padding:15px 18px}
.pc__tuile span{display:block;font-size:13px;color:#B6D0C4}
.pc__tuile b{display:block;font-family:var(--corps);font-weight:500;
  font-size:clamp(22px,2vw,30px);margin-top:4px}
.pc--sapin .pc__tuile:first-child b{color:var(--citron)}

/* --- bas de scene : points et bouton ---------------------------------- */
.parc__bas{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(16px,1.6vw,24px)}
.pcds{display:flex;gap:7px}
.pcd{width:8px;height:8px;border-radius:100px;background:var(--trait);
  transition:width .26s ease,background .26s ease}
.pcd.is-on{width:26px;background:var(--sapin)}

@media (max-width:900px){
  .parc{grid-template-columns:1fr;gap:18px}
  /* Une rangee horizontale defilante tenait moins de place, mais elle
     coupait la phrase de l'etape — or c'est elle qui raconte. Le sommaire
     reste vertical, simplement pose au-dessus du panneau. */
  .pcb{padding:11px 14px}
  .pcb__x b{font-size:16px}
  .pc{min-height:0;border-radius:26px}
  .pc__bulle{max-width:92%}
  .pc__tuiles{grid-template-columns:1fr}
  .parc__bas{flex-direction:column-reverse;align-items:stretch}
  .parc__bas .btn{justify-content:center}
  .pcds{justify-content:center}
}

/* --- le bloc des agents, version « cette nuit » ----------------------- */
.agents--nuit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(26px,3vw,56px);align-items:center}
.agents--nuit h2{font-size:clamp(30px,3.7vw,56px);line-height:1.02;letter-spacing:-.028em}
.agj{background:#fff;color:var(--sapin);border-radius:26px;
  padding:clamp(18px,1.8vw,26px)}
.agj__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:13px;border-bottom:1px solid var(--trait)}
.agj__hd b{font-size:15.5px}
.agj__etat{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#4A6B62}
.agj__etat::before{content:"";width:8px;height:8px;border-radius:50%;
  background:#3FA37B;animation:agpuls 1.9s ease-in-out infinite}
@keyframes agpuls{0%,100%{opacity:1}50%{opacity:.25}}
.agl{display:flex;gap:16px;align-items:baseline;padding:12px 0;
  border-bottom:1px solid var(--menthe-pale)}
.agl span{flex:none;width:46px;font-size:13px;color:#4A6B62;font-variant-numeric:tabular-nums}
.agl p{margin:0;font-size:14.5px;line-height:1.35}
.agj__pied{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--citron);border-radius:16px;padding:13px 17px;margin-top:14px;
  font-size:14px;font-weight:600}
.agj__lien{text-decoration:underline;white-space:nowrap}
@media (max-width:900px){
  .agents--nuit{grid-template-columns:1fr}
  .agl span{width:42px}
}
@media (prefers-reduced-motion:reduce){
  .agj__etat::before{animation:none}
  .pc{transition:none}
}

/* =======================================================================
   HARMONISATION TYPOGRAPHIQUE
   Deux polices, et deux seulement : Clash Display pour les titres (h1, h2,
   h3) et le logotype ; Figtree pour tout le reste — texte, boutons,
   chiffres, etiquettes, en-tetes de tableau. Trente regles utilisaient la
   police de titres sur des elements qui n'en sont pas (prix, pastilles,
   compteurs, intitules de colonnes) : elles sont repassees en Figtree.
   Les graisses 500 de Clash ne se transposent pas telles quelles — a
   taille egale, Figtree 500 parait plus leger. Les grands nombres et les
   intitules passent donc en 600 pour garder leur presence.
   ===================================================================== */
.plan__price,.plans--3 .plan__price,.plans--4 .plan__price,.entb__price,
.apl__px,.chap__n,.stat b,.tc__stat b,.tc__mail,.pc__tuile b,.pcb__x b,
.jalons li b,.foot__follow,.ar__cta p,.pc__off b,.pc__logo,.chip,
.mx__cat th,.ph b,.mb figcaption b,.ar__rel-t{font-weight:600}
/* Un prix de 50 px en Figtree 600 reste moins dense qu'en Clash 500 :
   un cran de chasse en moins recadre le bloc sur sa colonne. */
.plan__price,.plans--3 .plan__price,.plans--4 .plan__price,.apl__px,
.chap__n,.stat b{letter-spacing:-.02em}

/* =======================================================================
   « LE SOURCING A PRIS LE VIRAGE DE L'IA » — UN SEUL PANNEAU, UN
   INTERRUPTEUR PILOTE PAR LE DEFILEMENT
   Les deux colonnes cote a cote montraient le avant et l'apres en meme
   temps : on comparait, on ne basculait pas. Un seul panneau, dont les
   cinq lignes s'allument l'une apres l'autre a mesure qu'on descend —
   c'est le geste que la section raconte.
   Les deux libelles d'une ligne sont superposes dans la meme cellule :
   la hauteur ne bouge pas pendant le basculement.
   ===================================================================== */
.turn{margin-top:clamp(30px,3.4vw,52px);border-radius:36px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(4,52,40,.10);background:#fff;
  transition:background .5s ease,box-shadow .5s ease}
.turn.is-on{background:var(--citron-pale);box-shadow:inset 0 0 0 1px rgba(4,52,40,.10)}

/* --- l'entete : les deux libelles et le gros interrupteur ------------- */
.turn__hd{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.4vw,20px);
  padding:clamp(18px,1.8vw,26px) clamp(20px,2.2vw,32px);
  border-bottom:1px solid rgba(4,52,40,.08)}
.turn__lab{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  transition:color .35s ease,opacity .35s ease}
.turn__lab--a{color:var(--sapin)}
.turn__lab--b{color:#8AA39A}
.turn.is-on .turn__lab--a{color:#8AA39A}
.turn.is-on .turn__lab--b{color:var(--sapin)}
.swx{width:64px;height:34px;border-radius:100px;flex:none;position:relative;
  background:#DCE4E1;box-shadow:inset 0 0 0 1px rgba(4,52,40,.10);cursor:pointer;
  transition:background .35s ease}
.turn.is-on .swx{background:var(--citron)}
/* La pastille suit le defilement : --p va de 0 a 1 et le script le pose
   sur le bloc, de sorte que le bouton glisse au rythme du scroll plutot
   que de sauter d'un bord a l'autre. */
.swx__k{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;
  background:var(--sapin);translate:calc(var(--p,0) * 30px) 0;
  box-shadow:0 2px 6px rgba(4,52,40,.22)}

/* --- les lignes ------------------------------------------------------- */
.turn__r{display:flex;gap:14px;align-items:flex-start;
  padding:clamp(14px,1.5vw,20px) clamp(20px,2.2vw,32px);
  border-bottom:1px solid rgba(4,52,40,.06);font-size:clamp(15px,1.25vw,18px);
  line-height:1.35}
.turn__r:last-child{border-bottom:0}
.turn__tx{display:grid;min-width:0}
.turn__a,.turn__b{grid-area:1 / 1;transition:opacity .34s ease,transform .34s ease}
.turn__a{color:#7C8F89}
.turn__b{opacity:0;transform:translateY(5px);font-weight:500;color:var(--sapin)}
.turn__r.is-on .turn__a{opacity:0;transform:translateY(-5px)}
.turn__r.is-on .turn__b{opacity:1;transform:none}
/* l'interrupteur de la ligne, eteint puis allume */
.tg--sw{background:#DCE4E1;margin-top:.15em;transition:background .34s ease}
.tg--sw::after{right:auto;left:3px;background:#fff;
  transition:translate .34s cubic-bezier(.34,1.3,.5,1),background .34s ease}
.turn__r.is-on .tg--sw{background:var(--sapin)}
.turn__r.is-on .tg--sw::after{translate:18px 0;background:var(--citron)}

@media (max-width:760px){
  .turn__hd{gap:10px;padding:16px}
  .turn__lab{font-size:11px;letter-spacing:.08em}
  .swx{width:56px;height:30px}
  .swx__k{width:22px;height:22px;translate:calc(var(--p,0) * 26px) 0}
}
@media (prefers-reduced-motion:reduce){
  .turn,.turn__a,.turn__b,.tg--sw,.tg--sw::after,.swx{transition:none}
}

/* La plus longue des trois promesses — « Pay for your subscription with
   your very first placement » — debordait de quelques pixels et passait a
   la ligne, alors que les deux autres tenaient. Un cran de corps en moins
   et un peu moins d'espace avant l'interrupteur la ramenent sur une ligne
   des 1 200 px, sans toucher au texte. */
.toggles li{font-size:clamp(16px,1.42vw,21px);gap:clamp(12px,1vw,16px)}
.toggles .tg{width:clamp(42px,3.2vw,54px);height:clamp(23px,1.8vw,30px)}

/* La nouvelle photo de la section « promesse » est carree : le cadre
   repasse en 1/1, apres le 4/5 qui avait ete pose pour tenir le buste sur
   l'ancienne image en pied. Le cadrage est explicite — sans `cover`, une
   image de 900 px dans une case de 550 n'en montrait que le coin haut
   gauche, c'est-a-dire l'ecran de l'ordinateur. */
.promise__img{aspect-ratio:1;background-size:cover;background-position:55% 35%;
  background-repeat:no-repeat}

/* Les deux regles precedentes (couronne sur 100vw, texte a 64 %) arrivent
   APRES la media query des ecrans etroits et l'ecrasaient : la rangee de
   vignettes, redevenue statique, gardait le `translate:-50%` et sortait de
   l'ecran par la gauche, et la colonne de texte se retrouvait a 64 % de
   390 px. Les deux sont redeclarees ici. */
@media (max-width:900px){
  .gal__l{position:static;width:auto;left:auto;translate:none;
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:26px}
  .gal__txt{max-width:none}
  .gal__txt p{max-width:46ch}
}

/* Le bac a pastilles mesurait 420 px de haut alors que la pile n'en occupe
   qu'environ 120 : les 300 px restants creusaient un vide entre le titre et
   les temoignages. Il garde de quoi laisser tomber les pastilles, sans le
   gouffre. Les deux sections se resserrent dans la foulee. */
.sec--wall{padding:clamp(50px,5vw,72px) 0 0}
.wall{height:clamp(180px,16vw,220px);margin-top:clamp(4px,.6vw,10px)}
/* Le repli sans moteur physique empilait les pastilles en haut de la
   boite avec 40 px de marge : dans une boite plus courte, elles se
   centrent comme le ferait la pile. */
.wall__fallback{padding-top:0;align-content:center;height:100%}
.sec--quotes{padding:clamp(18px,2vw,30px) 0 clamp(60px,6vw,90px)}

/* --- l'agenda de reservation ------------------------------------------
   Deux etats : le cadre Google quand on a l'adresse d'integration, ou un
   grand bouton en attendant. Les deux occupent la meme boite, pour que le
   passage de l'un a l'autre ne change rien a la page. */
/* La page de reservation de Google fait environ 800 px de haut : en dessous,
   elle se dote d'une barre de defilement interne, ce qui donne deux
   defilements imbriques et agace. Le cadre lui laisse donc de la place. */
.cal{margin:clamp(26px,2.6vw,40px) auto 0;max-width:880px;
  border-radius:32px;overflow:hidden;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(4,52,40,.10)}
.cal iframe{display:block;width:100%;height:clamp(620px,58vw,820px)}
.cal--lien{display:grid;place-content:center;gap:14px;text-align:center;
  min-height:clamp(320px,30vw,420px);
  padding:40px 24px;background:var(--menthe-pale);box-shadow:none}
.cal__note{font-size:14px;margin:0}

/* Le lien de secours sous le cadre : discret quand tout va bien, visible
   quand le cadre reste vide. */
.cal__secours{text-align:center;font-size:14px;margin:14px 0 0}
.cal__secours a{text-decoration:underline;text-underline-offset:3px}

/* Le montant reellement preleve, sous le bouton d'abonnement. Discret mais
   lisible : il doit etre lu avant le clic, pas decouvert sur la facture. */
.plan__fact{text-align:center;font-size:13px;line-height:1.35;margin:10px 0 0;color:#4A6B62}
.plan--hi .plan__fact{color:#B6D0C4}

/* =======================================================================
   TEMOIGNAGES — HUIT, QUI DEFILENT
   Les deux fleches existaient dans le balisage sans aucun script derriere :
   elles avaient l'air cliquables et ne faisaient rien. Avec huit
   temoignages au lieu de trois, elles servent enfin.
   Le defilement est un debordement horizontal avec accrochage : le doigt,
   la molette et le clavier fonctionnent sans une ligne de code, les
   fleches ne font que pousser le conteneur.
   ===================================================================== */
.quotes{display:flex;gap:clamp(16px,1.8vw,24px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:26px 2px 6px}
.quotes::-webkit-scrollbar{display:none}
.quotes .quote{flex:0 0 calc((100% - 2 * clamp(16px,1.8vw,24px)) / 3);
  scroll-snap-align:start;margin-top:0}
/* Le pseudo-element qui prolongeait le haut de la carte etait cale sur un
   bloc statique ; dans un conteneur qui defile il derivait. */
.quotes .quote::before{display:none}

.qav{display:block;width:96px;height:96px;border-radius:50%;margin:-30px auto 22px;
  position:relative;z-index:1;background-size:cover;background-position:50% 22%;
  background-repeat:no-repeat;box-shadow:0 6px 18px rgba(4,52,40,.14)}
/* Pas de portrait confirme : les initiales, jamais un visage au hasard. */
.qav--ini{display:grid;place-items:center;background:var(--sapin);color:var(--citron);
  font-family:var(--corps);font-weight:600;font-size:28px;letter-spacing:.02em}

.qnav button:disabled{opacity:.35;cursor:default}
.qnav button:disabled:hover{background:var(--menthe-pale)}

@media (max-width:1100px){
  .quotes .quote{flex-basis:calc((100% - clamp(16px,1.8vw,24px)) / 2)}
}
@media (max-width:760px){
  .quotes .quote{flex-basis:88%}
}

/* =======================================================================
   LE HERO GRANDIT AVEC L'ECRAN
   Il mesurait 600 px de haut a 1280, a 1440 et a 2000 px : titre fige a
   64 px, hauteur minimale figee a 560. Resultat, 75 % du premier ecran sur
   un portable et 60 % sur un grand ecran — il retrecissait a mesure que
   l'ecran grandissait. Tout le reste de la page etant fluide, le h1 de
   l'accueil finissait meme plus petit que les h2 des sections (72 px).
   ===================================================================== */
h1{font-size:clamp(38px,5vw,86px)}
.hero__grid{min-height:clamp(560px,62vh,760px);gap:clamp(40px,4.4vw,72px)}
.hero h1{margin-bottom:clamp(18px,1.8vw,28px)}
.hero .lede{margin-bottom:clamp(20px,2.2vw,32px)}

/* Redeclaration obligatoire : les deux media queries des ecrans etroits
   arrivent AVANT ce bloc et seraient ecrasees. Le clamp donne deja 44 px a
   880 px de large et 38 px sous 760, donc on laisse le fluide faire — on
   ne reimpose que la hauteur libre. */
@media (max-width:980px){
  .hero__grid{min-height:0;gap:34px}
}

/* Le rappel du montant annuel sous un prix affiche au mois. Un engagement
   de douze mois presente a « 417 € » sans autre mention laisse croire qu'on
   peut s'arreter apres un mois. */
.apl__an{font-size:13px;color:#4A6B62;margin:6px 0 0}
.apl--hi .apl__an{color:#B6D0C4}

/* API Scale a disparu : trois formules et non plus quatre. La grille suit,
   sinon les cartes se serrent sur trois quarts de la largeur et laissent un
   trou a droite. */
.apls{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.apls{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.apls{grid-template-columns:1fr}}

/* --- API : ce que l'API sait faire, par famille ------------------------
   Le tableau des prix par appel a ete retire du public : ce qui reste est
   un catalogue de capacites. Quatre familles, les endpoints en gras et la
   phrase qui dit a quoi ils servent. */
.acts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,26px);
  margin-top:clamp(26px,2.8vw,40px)}
.acf{background:var(--menthe-pale);border-radius:26px;padding:clamp(20px,2vw,30px);
  box-shadow:inset 0 0 0 1px rgba(4,52,40,.07)}
.acf__t{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#4A6B62;margin:0 0 14px}
.acf ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.acf li{display:grid;gap:3px}
.acf code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  font-weight:600;color:var(--sapin)}
.acf li span{font-size:14.5px;line-height:1.4;color:#3A5A50}

/* --- API : les trois cas d'usage --------------------------------------
   Premiere version : trois cartes blanches a liseré fin, sur une page
   blanche, serrees contre le bandeau sombre juste en dessous. Rien ne les
   tenait. Elles reprennent maintenant la facture du reste du site — une
   teinte de la palette, une pastille d'icone — et respirent. */
.sec--apicas{padding:clamp(60px,6vw,90px) 0 clamp(50px,5vw,80px)}
.cas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px);
  margin-top:clamp(26px,2.8vw,40px)}
.cas__c{position:relative;border-radius:30px;padding:clamp(24px,2.4vw,36px);
  display:flex;flex-direction:column}
.cas__c--citron{background:var(--citron)}
.cas__c--dragee{background:var(--dragee)}
.cas__c--lin{background:var(--lin)}
.cas__ico{width:clamp(44px,4vw,56px);height:clamp(44px,4vw,56px);border-radius:50%;
  background:#fff;display:grid;place-items:center;flex:none;
  box-shadow:0 4px 14px rgba(4,52,40,.10)}
.cas__ico svg{width:52%;height:52%;color:var(--sapin)}
.cas__c h3{font-size:clamp(19px,1.7vw,26px);line-height:1.08;letter-spacing:-.022em;
  margin:clamp(18px,1.8vw,26px) 0 10px;max-width:14ch}
.cas__c p{font-size:15px;line-height:1.45;color:#23463C;margin:0}
/* Le numero passe en filigrane dans l'angle : il ordonne sans voler la
   vedette au titre, ce que faisait un « 01 » pose juste au-dessus. */
.cas__n{position:absolute;top:clamp(20px,2vw,30px);right:clamp(22px,2.2vw,32px);
  font-family:var(--display);font-weight:500;font-size:clamp(30px,2.8vw,44px);
  line-height:1;color:var(--sapin);opacity:.16;pointer-events:none}
@media (max-width:900px){
  .acts,.cas{grid-template-columns:1fr}
  .cas__c h3{max-width:none}
}

/* =======================================================================
   HERO — LE TITRE TIENT EN DEUX LIGNES, LE CHAPO SE LIT
   Demande d'Alexis, 14 octobre. Le h1 est ecrit en deux segments separes
   par un <br> ("Turn hiring signals" / "into placements."), mais la colonne
   de texte ne mesurait que 534 px a 1440 : le premier segment, qui demande
   8,13 em, se cassait a son tour et le titre tombait a quatre lignes.
   Mesure faite dans le document, a 76 px de corps et avec l'interlettrage
   applique : "Turn hiring signals" demande 657 px, soit 8,65 em. C'est le
   segment le plus long des deux langues ; le francais ("Trouvez vos") en
   demande deux fois moins.
   Deux leviers, et pas de nowrap — un nowrap mal calibre deborderait :
     1. la colonne s'elargit (wrap a 1320, rapport 1,32 / 1) -> 683 px ;
     2. le corps du h1 plafonne a 76 px -> 657 px demandes, 26 px de marge.
   La video passe de 532 a 517 px : elle ne perd presque rien.
   ===================================================================== */
.hero .wrap{max-width:1320px}
.hero__grid{grid-template-columns:1.32fr 1fr}
.hero h1{font-size:clamp(38px,5vw,76px);letter-spacing:-.015em}

/* Le chapo portait 16 px / 1.2 : quatre lignes serrees sous un titre de
   76 px, c'est le bloc qu'on saute. Il remonte a 19 px et respire. Seul le
   chapo du hero bouge ; les .lede des autres sections sont inchangees. */
.hero .lede{font-size:clamp(17px,1.3vw,19px);line-height:1.45;max-width:36em}

/* Redeclaration obligatoire : la media query des ecrans etroits est
   declaree bien avant ce bloc et serait ecrasee par les regles ci-dessus,
   a specificite egale. Sous 980 px le hero repasse en une colonne. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero .lede{max-width:none}
}

/* Les deux titres consecutifs de l'accueil (bandeau de logos, puis bascule
   « sans IA / avec Profilr ») sont centres de la meme facon : le second
   restait aligne a gauche. */
.sec--turn h2{text-align:center}

/* =======================================================================
   LE HAUT DE LA LANDING EN VERT SAPIN  (header + hero, accueil seulement)
   Demande d'Alexis, 14 octobre : plus de couleur entre les sections, sur le
   modele de la banniere LinkedIn — fond sapin a degrade doux, titre blanc
   dont les mots cles passent au citron, trait de logo vert clair.
   Le reste de la page reste blanc : le contraste fait le rythme.
   Le header est transparent sur le hero (le hero remonte derriere lui,
   d'ou la marge negative), puis redevient blanc quand on quitte le vert.
   La classe .nav--sapin est posee par app.js ; les autres pages ne l'ont
   jamais, leur header reste donc blanc.
   ===================================================================== */
:root{--navh:86px;--vert-fond:#0B3A2E;--vert-trait:#94C28A;--clair:#EAFFC4;--texte-clair:#CFE0D4}

.nav{transition:background-color .35s ease,box-shadow .35s ease}
.page[data-page="home"] .hero{
  margin-top:calc(var(--navh) * -1);padding-top:calc(var(--navh) + 40px);
  background:
    radial-gradient(120% 140% at 88% 8%,#3C6446 0%,rgba(60,100,70,0) 55%),
    linear-gradient(115deg,#0A352A 0%,#0F4132 55%,#1C4F3B 100%);
  color:#fff;
  border-radius:0 0 clamp(36px,6vw,100px) clamp(36px,6vw,100px)}
.page[data-page="home"] .hero.deco--l::before{
  background-image:var(--art-clover-v);opacity:.5;left:auto;right:-220px;top:-120px;
  width:clamp(620px,62vw,1040px);height:clamp(620px,62vw,1040px)}
.page[data-page="home"] .hero.deco--l::after{
  content:"";background-image:var(--art-caps-v);opacity:.42;
  width:clamp(520px,54vw,900px);height:clamp(234px,24vw,404px);
  left:-260px;bottom:-110px;right:auto;top:auto}

.hero h1{color:#fff}
.hero .lede,.hero .lede.muted{color:var(--texte-clair)}
.hero__micro{color:#9FBFB0}
.hero__pt{opacity:.55}

/* les mots qui s'allument : blanc -> citron, l'un apres l'autre */
.hero h1 em.hl{font-style:normal;color:var(--citron);
  animation:allume 1.1s cubic-bezier(.3,.7,.3,1) both}
.hero h1 em.hl1{animation-delay:.35s}
.hero h1 em.hl2{animation-delay:.85s}
@keyframes allume{
  0%{color:#fff;text-shadow:0 0 0 rgba(223,255,165,0)}
  55%{text-shadow:0 0 .55em rgba(223,255,165,.55)}
  100%{color:var(--citron);text-shadow:0 0 0 rgba(223,255,165,0)}}
@media (prefers-reduced-motion:reduce){.hero h1 em.hl{animation:none}}

/* la video : un cadre translucide sur le vert, plus de halo citron plein */
.page[data-page="home"] .hero__media::before{
  background:radial-gradient(ellipse at 50% 50%,rgba(223,255,165,.20),rgba(223,255,165,.07) 46%,transparent 70%)}
.page[data-page="home"] .hero__video{
  background:rgba(255,255,255,.06);border:1.5px dashed rgba(255,255,255,.28);color:#fff}
.page[data-page="home"] .hero__video span,.page[data-page="home"] .hero__video b{color:var(--texte-clair)}

/* boutons du hero : le citron reste, le contour passe en blanc */
.page[data-page="home"] .hero .btn--vide{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);background:none}
.page[data-page="home"] .hero .btn--vide::before{background:var(--citron)}
.page[data-page="home"] .hero .btn--vide:hover{background:rgba(255,255,255,.1)}

/* header sur le vert */
.nav.nav--sapin{background:transparent;box-shadow:none}
.nav--sapin .logo{background-image:url(/assets/img/nav-sapin-logo.svg)}
.nav--sapin .nav__menu{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.nav--sapin .nav__menu a,.nav--sapin .nav__dropbtn{color:#fff}
.nav--sapin .nav__menu a:hover,.nav--sapin .nav__dropbtn:hover,.nav--sapin .nav__drop.on .nav__dropbtn{background:rgba(255,255,255,.12)}
.nav--sapin .lang{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.nav--sapin .lang :is(button,a){color:#9FBFB0}
.nav--sapin .lang :is(button,a):hover{color:#fff}
.nav--sapin .lang :is(button,a).on{background:rgba(255,255,255,.14);color:#fff}
.nav--sapin .nav__login{color:#fff}
.nav--sapin .nav__login:hover{color:var(--citron)}
.nav--sapin .nav__trial{background:var(--citron);color:var(--sapin)}
.nav--sapin .nav__trial::before{background:var(--sapin)}
.nav--sapin .nav__trial:hover{background:#CFF391}
.nav--sapin .burger{background:rgba(255,255,255,.12);color:#fff}
.nav--sapin .burger svg{stroke:#fff}

/* mobile : le hero est centre, le trait se replie derriere le titre */
@media (max-width:980px){
  .page[data-page="home"] .hero.deco--l::before{right:-300px;top:-60px;opacity:.38}
  .page[data-page="home"] .hero.deco--l::after{opacity:.3}
}

/* le trait du hero se fait plus discret : a .5 il traversait la video et les
   boutons du header, a .3 il reste un decor (comme sur la banniere) */
.page[data-page="home"] .hero.deco--l::before{opacity:.3}
.page[data-page="home"] .hero.deco--l::after{opacity:.26}
@media (max-width:980px){
  .page[data-page="home"] .hero.deco--l::before{opacity:.22}
  .page[data-page="home"] .hero.deco--l::after{opacity:.2}
}

/* =======================================================================
   HERO FRANCAIS EN DEUX LIGNES : "Trouvez vos clients &" / "candidats."
   Le segment du haut demande 9,9 em (mesure en rects de texte, espace
   compris), contre 8,65 em pour "Turn hiring signals" : il ne tient pas au
   corps de 76 px de l'anglais dans une colonne de 683 px. On plafonne donc
   le francais a 64 px (634 px demandes, ~50 px de marge), et sur mobile le
   corps suit la largeur de l'ecran pour que la premiere ligne ne se recasse
   jamais.
   ===================================================================== */
.page[data-lang="fr"][data-page="home"] .hero h1{font-size:clamp(38px,4.4vw,64px)}
@media (max-width:760px){
  .page[data-lang="fr"][data-page="home"] .hero h1{font-size:min(38px,calc((100vw - 48px) / 10.3))}
}

/* =======================================================================
   LA ZONE FAQ EN BLEU  (accueil)
   Demande d'Alexis, 14 octobre, dans le prolongement du hero sapin : de la
   couleur entre les sections. Le panneau dragee a coins arrondis que le
   passage au blanc avait supprime revient, plus soutenu qu'avant (il se
   fondait en blanc a mi-hauteur), avec le trait du logo en bleu. Le pied de
   page sapin, arrondi lui aussi, vient mordre sur son bord bas.
   ===================================================================== */
.page[data-page="home"] .faq{
  background:linear-gradient(180deg,#C6D9F1 0%,#D3E2F4 55%,#DCE8F6 100%);
  border-radius:clamp(48px,7vw,100px) clamp(48px,7vw,100px) 0 0;
  margin-top:clamp(40px,5vw,80px);padding:clamp(72px,8vw,120px) 0 clamp(96px,10vw,140px)}
.page[data-page="home"] .faq.dc-tr3::before{
  background-image:var(--art-clover-b);opacity:.5}
.page[data-page="home"] .faq details{box-shadow:none}
.page[data-page="home"] .faq summary::after{background:#E4EEF9}
@media (max-width:980px){
  .page[data-page="home"] .faq{border-radius:52px 52px 0 0}
}

/* Le bleu de la FAQ descend sous le pied de page. Le pied est arrondi en haut
   (100 px, 52 sous 980) et le blanc du fond apparaissait dans ses deux
   coins. On remonte donc le pied du rayon de ses coins : le panneau bleu
   passe derriere, et le sapin se detache directement sur du bleu. Le bas du
   panneau gagne le meme rayon pour que le dernier bouton garde son air. */
.page[data-page="home"] .faq{padding-bottom:calc(clamp(96px,10vw,140px) + 100px)}
.page[data-page="home"] .foot{margin-top:-100px;position:relative;z-index:2}
@media (max-width:980px){
  .page[data-page="home"] .faq{padding-bottom:calc(clamp(96px,10vw,140px) + 52px)}
  .page[data-page="home"] .foot{margin-top:-52px}
}

/* =======================================================================
   TEMOIGNAGES : LE PORTRAIT ENTRE DANS LA CARTE
   Le portrait debordait de 30 px au-dessus de la carte (marge negative).
   Or le carrousel est un conteneur a defilement horizontal, qui coupe
   aussi en vertical : le haut du visage etait tranche net. Le portrait
   reste donc a l'interieur, et le texte descend d'autant : la carte gagne
   un rembourrage haut au lieu d'une marge negative.
   ===================================================================== */
.quotes .quote{padding-top:clamp(28px,2.6vw,38px)}
.quotes .qav{margin:0 auto clamp(20px,1.8vw,26px)}

/* Sur mobile les pastilles, plus larges que l'ecran n'est haut de place,
   s'empilent sur plusieurs rangs : dans un bac de 180 px les rangs du haut
   sortaient du canevas et etaient coupes. Le bac gagne de la hauteur. */
@media (max-width:600px){ .wall{height:300px} }

/* =======================================================================
   LE MUR DE PASTILLES ET SES TEMOIGNAGES RESPIRENT
   Demande d'Alexis, 14 octobre : « espacer un peu tout ça ». Les pastilles
   s'empilaient bord a bord et se chevauchaient (le corps physique collait
   a la forme dessinee) : il garde maintenant 7 px de jeu de chaque cote
   (voir app.js). Un tas plus aere est plus haut, donc le bac grandit, et
   les temoignages repartent un peu plus bas.
   ===================================================================== */
.wall{height:clamp(250px,20vw,310px)}
.sec--wall{padding-top:clamp(64px,6vw,96px)}
.sec--quotes{padding-top:clamp(40px,3.8vw,64px)}
@media (max-width:600px){ .wall{height:340px} }
/* sur mobile le tas aere compte cinq rangs : 340 px coupaient encore le haut */
@media (max-width:600px){ .wall{height:440px} }

/* =======================================================================
   SECTION « PROMESSE » : TITRE EN DEUX LIGNES, PHOTO CARREE A LA HAUTEUR DU TEXTE
   Demande d'Alexis, 14 octobre. Le titre se coupe a la main apres le premier
   point (voir content.py) : « Win more mandates. » / « Fill them faster.
   With AI. ». Reste a ce que chaque ligne tienne dans la colonne.
   Mesure en Clash Display 500, a 100 px de corps : la ligne la plus longue
   fait 10,77 em en anglais et 12,98 em en francais. Le corps du titre suit
   donc la LARGEUR DE SA COLONNE (unites de conteneur), pas celle de l'ecran :
   7,4 cqw en francais (96 % de la colonne), 9 cqw en anglais (97 %).
   La photo reste carree et sa cote est celle du bloc de texte, du haut du
   titre au bas du bouton ; app.js la mesure et la pose dans --side. Sans
   JS, ou sous 980 px (colonne unique), elle garde sa largeur de colonne.
   ===================================================================== */
.promise{grid-template-columns:.9fr 1.1fr}
.promise > div:nth-child(2){container-type:inline-size;min-width:0}
.promise__fig{align-self:center;display:flex;justify-content:flex-start}
.promise__img{width:var(--side,100%);max-width:100%;flex:none}
/* remesure du 16 octobre dans le navigateur : la premiere ligne fait 13,44 em en francais et
   9,89 em en anglais (« Win more mandates. »). A 10,2 cqw l'anglais debordait de sa colonne
   des 1728 px d'ecran (« Win more / mandates. ») et le francais, a 7,4 cqw, remplissait 99 %
   de la sienne. 7,1 et 9,7 cqw les remplissent a 95-96 %. */
.page[data-lang="fr"] .promise__h{font-size:min(clamp(28px,4vw,62px),7.1cqw)}
.page[data-lang="en"] .promise__h{font-size:min(clamp(28px,4vw,62px),9.7cqw)}
@media (max-width:980px){
  .promise{grid-template-columns:1fr}
  .promise__img{width:100%}
  .promise__fig{display:block}
}


/* =======================================================================
   PARCOURS, VERSION EPINGLEE ET PLEINE LARGEUR
   Le sommaire passe en barre horizontale au-dessus d'une scene qui prend
   toute la largeur. La section reste epinglee et c'est le defilement qui
   fait avancer les etapes (app.js ajoute .parc--pin quand l'ecran est
   assez grand ; sans JS ou sur petit ecran, la section reste libre).
   `overflow:clip` et non `hidden` : hidden casserait position:sticky.
   ===================================================================== */
.sec--parc.deco{overflow:clip;padding:clamp(40px,4.4vw,72px) 0 clamp(36px,4vw,64px)}
.sec--parc h2{font-size:clamp(28px,3.7vw,58px);max-width:none}
.parc{display:block;margin-top:0}
.parc__stick{display:block}
.parc__tete{margin-bottom:clamp(18px,1.8vw,28px)}
.pc__lede{margin-top:clamp(8px,.8vw,14px)}
.pcx{margin-bottom:clamp(10px,1vw,16px)}

/* la barre des six etapes */
.parc__nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.pcb{align-items:center;padding:10px 14px;border-radius:18px;gap:11px}
.pcb__x b{font-size:clamp(14px,1.1vw,17px);line-height:1.18}
.pcb__d{display:none !important}
.pccs{display:grid;margin:clamp(10px,1vw,16px) 0 clamp(10px,1vw,16px)}
.pcc{grid-area:1 / 1;margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.4;
  color:#3A5A50;transition:opacity .3s ease;min-height:2.8em;
  display:flex;align-items:center}
.pcc[aria-hidden="true"]{opacity:0}

/* la scene, pleine largeur */
.parc__pans{display:grid;grid-template-rows:minmax(0,1fr)}
.pc{padding:clamp(20px,2.4vw,40px);min-height:clamp(340px,30vw,440px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:clamp(28px,3vw,44px)}
.pc__in{display:flex;flex-direction:column;justify-content:center;gap:12px;
  width:100%;max-width:720px}
.parc--pin .pc__in{zoom:var(--z,1)}

/* epinglage : la piste est haute, la scene colle sous la barre de nav */
.parc--pin{height:calc(100svh + (var(--n) - 1) * 62svh)}
.parc--pin .parc__stick{position:sticky;top:var(--navh,86px);
  height:calc(100svh - var(--navh,86px));display:flex;flex-direction:column;
  padding-top:14px;padding-bottom:18px}
.parc--pin .parc__tete{flex:none}
.parc--pin .parc__nav,.parc--pin .pccs,.parc--pin .parc__bas{flex:none}
.parc--pin .parc__pans{flex:1 1 0;min-height:0}
.parc--pin .pc{min-height:0}
.parc__bas{margin-top:clamp(10px,1vw,16px)}

@media (min-width:901px){
  .sec--parc h2{white-space:nowrap}
}

@media (max-width:900px){
  .sec--parc h2{white-space:normal}
  .parc__nav{grid-template-columns:1fr;gap:4px}
  .pcb{padding:11px 14px}
  .pcb__x b{font-size:16px}
  .pcb.is-on .pcb__d{display:block !important}
  .pccs{display:none}
  .pc{min-height:0;border-radius:26px;padding:22px 16px}
  .pc__in{max-width:none}
  .pc__bulle{max-width:92%}
  .pc__tuiles{grid-template-columns:1fr}
  .parc__bas{flex-direction:column-reverse;align-items:stretch}
  .parc__bas .btn{justify-content:center}
  .pcds{justify-content:center}
}

/* compactage : tout doit tenir dans un ecran de portable une fois epingle */
.parc__tete{margin-bottom:clamp(10px,1vw,16px)}
.pccs{margin:8px 0 8px}
.pcc{min-height:2.6em}
.pc{padding:14px clamp(20px,2.4vw,40px)}
.pc__in{gap:10px}
.parc__bas{margin-top:10px}
.parc--pin .parc__stick{padding-top:8px;padding-bottom:14px}
.parc--pin .pc{padding:12px clamp(20px,2.4vw,40px)}
@media (max-width:900px){.pc{padding:22px 16px}.pccs{display:none}}

/* barre des etapes plus serree : deux lignes au plus par titre */
@media (min-width:901px){
  .parc__nav{gap:6px}
  .pcb{padding:8px 10px;gap:8px;border-radius:16px}
  .pcb__n{width:26px;height:26px;font-size:12.5px}
  .pcb__x b{font-size:clamp(13.5px,1.05vw,16px)}
  .sec--parc h2{margin:0}
  .pcx{margin-bottom:6px}
}

/* bloc « Agentic » : texte remonte en haut a gauche, plus aere */
.agents--nuit{align-items:start}
.agents--nuit .agents__g{align-self:start;padding-top:clamp(0px,.6vw,10px)}
.agents--nuit .eyebrow{margin-bottom:clamp(18px,1.8vw,28px)}
.agents--nuit h2{margin:0}
.agents--nuit .agents__body{margin-top:clamp(26px,2.6vw,40px)}
.agents--nuit .agents__g .btn{margin-top:clamp(32px,3.2vw,50px)}
@media (max-width:900px){.agents--nuit .agents__g{padding-top:0}}
.agents--nuit .agj{align-self:center}

/* bascule « sans IA / avec Profilr » : carte carree, centree */
@media (min-width:761px){
  .turn{width:min(100%,640px);aspect-ratio:1;margin-left:auto;margin-right:auto;
    display:flex;flex-direction:column}
  .turn__hd{justify-content:flex-start;flex:none}
  .turn__r{flex:1;align-items:center;justify-content:center;text-align:center;
    padding-top:0;padding-bottom:0}
  .turn__r .tg--sw{margin-top:0}
}
.turn__cta{text-align:center}
.turn__cta .btn{margin:0 auto}
@media (min-width:761px){
  /* un bloc centre, toggles alignes : centrer chaque ligne separement les
     decalait, car les deux etats d'une ligne n'ont pas la meme largeur */
  .turn__r{justify-content:flex-start;text-align:left;padding-left:13%;padding-right:6%}
}

/* =======================================================================
   TITRES : une seule regle, tout est centre (14 octobre)
   Les deux sections a deux colonnes (promesse, agents) gardent leur titre
   a gauche, dans leur colonne de texte.
   ===================================================================== */
.sec--proof h2,.sec--wall h2,.sec--plans h2,.sec--contact h2,.faq h2,.sec--parc h2{
  font-size:clamp(28px,3.4vw,50px)}
.sec--parc .parc__tete{text-align:center}
.sec--parc .pcx{justify-content:center}
.sec--parc .pc__lede{margin-left:auto;margin-right:auto}

/* =======================================================================
   INTEGRATIONS COMPRESSEES : couronne plus basse, moins de marges
   ===================================================================== */
.gal{padding:clamp(36px,3.6vw,56px) 0;min-height:clamp(470px,40vw,600px)}
.gall{--ry:clamp(185px,18vw,255px)}
.sec--integ{padding-top:clamp(40px,4vw,64px);padding-bottom:clamp(40px,4vw,64px)}
/* 52 px au plus : au-dela, « Integrez votre ecosysteme : » ne tient plus dans le cercle des logos (3 lignes) */
.sec--integ .gal__txt h2{font-size:clamp(30px,3.6vw,52px)}
.gal{min-height:clamp(470px,40vw,660px)}
.gall{--ry:clamp(185px,18vw,290px)}
.gal{min-height:calc(2.1 * clamp(185px,18vw,290px) + 96px)}
@media (max-width:900px){.gal{min-height:0}}

/* en-tete du parcours : plus d'air entre les lignes */
@media (min-width:901px){
  .sec--parc .pcx{margin-bottom:16px}
  .sec--parc .pc__lede{margin-top:14px}
  .sec--parc .parc__tete{margin-bottom:24px}
  .pccs{margin:14px 0 14px}
  .parc--pin .parc__stick{padding-top:12px}
}

/* « Notre histoire » : titre a gauche, photo d'equipe plus petite a droite */
@media (min-width:901px){
  .story__top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(32px,4vw,72px);align-items:center}
  .story__top .story__h1{font-size:clamp(36px,4.5vw,68px)}
  .story__top .story__groupe{margin-top:0;aspect-ratio:4/3;background-position:50% 35%}
}
.story__top .story__lede{text-wrap:balance;max-width:none}
@media (min-width:901px){
  .story__top{grid-template-columns:minmax(0,1fr) clamp(260px,25vw,360px)}
  .story__top .story__groupe{aspect-ratio:1/1;background-position:50% 30%}
}
@media (min-width:901px){.story__top .story__groupe{aspect-ratio:4/3;background-position:50% 35%}}

/* =======================================================================
   POUR QUI : blocs plus aeres, phrases sur le moins de lignes possible
   ===================================================================== */
@media (min-width:901px){
  .pq{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:clamp(36px,4.4vw,72px);
    padding:clamp(40px,4.2vw,64px) clamp(28px,3vw,44px) clamp(40px,4.2vw,64px) clamp(44px,5.2vw,84px)}
  .pq .chip{margin-bottom:clamp(20px,2vw,30px)}
  .pq h2{margin-bottom:clamp(18px,1.8vw,26px)}
  .pq__phrase{max-width:none;margin-bottom:clamp(16px,1.6vw,24px);text-wrap:balance}
  .pq__p{max-width:none;margin-bottom:clamp(36px,3.6vw,56px);text-wrap:pretty}
  .pq__l .btn{margin-top:auto}
  .pq__pts{gap:clamp(14px,1.3vw,20px);margin-bottom:clamp(28px,2.6vw,38px)}
  .pq__pts li{font-size:14.5px}
  .pq__kpis{margin-bottom:clamp(28px,2.6vw,38px)}
}

/* couvertures generees : plus de cadre pointille */
.cov{background-size:cover;background-position:center;background-repeat:no-repeat}
.bl__img.cov{border-bottom:0}
.ar__hero.cov{border:0}

/* pages legales */
.lg .ar__body h2{font-size:24px;margin:44px 0 14px}
.lg .ar__body h3{font-size:18px;margin:26px 0 10px}
.lg .ar__body ul{margin:0 0 18px 1.2em;padding:0}
.lg .ar__body li{margin-bottom:8px}
.lg__note{font-size:14px;color:#4A6B62;background:var(--menthe-pale);border-radius:14px;padding:12px 16px;margin:0 0 24px}

/* =======================================================================
   PAGES API / TRUST CENTER / FAQ : meme passage que l'accueil (14 octobre)
   titres centres, espaces resserres, plus de bloc de fin
   ======================================================================= */
/* --- API --- */
.sec--apihead .wrap{text-align:center}
.sec--apihead .story__lede,.sec--apihead .api__avert{margin-left:auto;margin-right:auto}
.sec--apihead .api__cta{justify-content:center}
.sec--conv h2,.sec--apiplans h2,.sec--apiact h2,.sec--apicas h2,
.sec--apiact .lede,.sec--apicas .lede{text-align:center}
.sec--apiact .lede,.sec--apicas .lede{margin-left:auto;margin-right:auto}
.sec--conv h2,.sec--apiplans h2,.sec--apiact h2,.sec--apicas h2{font-size:clamp(28px,3.4vw,50px)}
.sec--conv,.sec--apiplans,.sec--apiact,.sec--apicas{padding:clamp(34px,3.4vw,52px) 0}
.sec--apicas{padding-bottom:clamp(56px,5vw,80px)}
@media (min-width:761px){[data-page="api"] .convs{grid-template-columns:repeat(3,1fr)}}
/* --- Trust Center --- */
.sec--tc{padding:clamp(34px,3.4vw,52px) 0}
.sec--tc .tc__eyebrow{display:table;margin:0 auto 12px}
.sec--tc h2,.sec--tc .tc__note{text-align:center;margin-left:auto;margin-right:auto}
.sec--tc h2{font-size:clamp(28px,3.4vw,50px)}
.sec--tc .tc__form{margin-left:auto;margin-right:auto}
.sec--tc .tc__stats{margin-top:26px}
.sec--iadark h2{font-size:clamp(28px,3.4vw,50px)}
.tc__hero .wrap{text-align:center}
.tc__hero .tc__lede{margin-left:auto;margin-right:auto}
.tc__hero .tc__cta,.tc__hero .tc__badges{justify-content:center}
/* --- FAQ --- */
.sec--fq-head{padding-bottom:clamp(8px,1vw,16px)}
.sec--fq{padding-bottom:clamp(60px,6vw,96px)}
.sec--apiact h2,.sec--apicas h2{margin-bottom:14px}
@media (min-width:1100px){.tc__docs{grid-template-columns:repeat(4,1fr)}}
.sec--fq-head .eyebrow{text-align:center}
/* articles importes : images du corps */
.ar__fig{margin:30px 0;text-align:center}
.ar__fig img{max-width:100%;height:auto;border-radius:24px}
.ar__body a{text-decoration:underline;text-underline-offset:2px}

.ph--1{background-image:url(/assets/img/ph-1.webp)}
.ph--2{background-image:url(/assets/img/ph-2.webp)}
.ph--3{background-image:url(/assets/img/ph-3.webp)}
.ph--4{background-image:url(/assets/img/ph-4.webp)}
.ph--5{background-image:url(/assets/img/ph-5.webp)}
.ph--6{background-image:url(/assets/img/ph-6.webp)}
.ph--7{background-image:url(/assets/img/ph-7.webp)}
.ph--8{background-image:url(/assets/img/ph-8.webp)}
.story__groupe{background-image:url(/assets/img/story-groupe.webp)}
.promise__img{background-image:url(/assets/img/promise-img.webp)}
.marq__l--teaminside{background-image:url(/assets/img/marq-l-teaminside.png)}
.marq__l--astree{background-image:url(/assets/img/marq-l-astree.png)}
.marq__l--systra{background-image:url(/assets/img/marq-l-systra.png)}
.marq__l--monsieurguiz{background-image:url(/assets/img/marq-l-monsieurguiz.png)}
.marq__l--4cad{background-image:url(/assets/img/marq-l-4cad.png)}
.marq__l--blueway{background-image:url(/assets/img/marq-l-blueway.png)}
.marq__l--humanskills{background-image:url(/assets/img/marq-l-humanskills.png)}
.marq__l--sib{background-image:url(/assets/img/marq-l-sib.png)}
.marq__l--wakeo{background-image:url(/assets/img/marq-l-wakeo.png)}
.marq__l--lelabrh{background-image:url(/assets/img/marq-l-lelabrh.png)}
.marq__l--opensourcing{background-image:url(/assets/img/marq-l-opensourcing.png)}
.marq__l--aia{background-image:url(/assets/img/marq-l-aia.png)}
.qav--alexandre-s{background-image:url(/assets/img/qav-alexandre-s.webp)}
.qav--cecile-lachan{background-image:url(/assets/img/qav-cecile-lachan.webp)}
.qav--guillaume-morin{background-image:url(/assets/img/qav-guillaume-morin.webp)}
.qav--joris-m{background-image:url(/assets/img/qav-joris-m.webp)}
.qav--julia-thomas{background-image:url(/assets/img/qav-julia-thomas.webp)}
.qav--marion-piel{background-image:url(/assets/img/qav-marion-piel.webp)}
.qav--quentin-f{background-image:url(/assets/img/qav-quentin-f.webp)}
.qav--virginie-ruan{background-image:url(/assets/img/qav-virginie-ruan.webp)}
.ilogo--bullhorn{background-image:url(/assets/img/ilogo-bullhorn.webp)}
.ilogo--loxo{background-image:url(/assets/img/ilogo-loxo.webp)}
.ilogo--teamtailor{background-image:url(/assets/img/ilogo-teamtailor.webp)}
.ilogo--ashby{background-image:url(/assets/img/ilogo-ashby.webp)}
.ilogo--greenhouse{background-image:url(/assets/img/ilogo-greenhouse.webp)}
.ilogo--icims{background-image:url(/assets/img/ilogo-icims.webp)}
.ilogo--recruitcrm{background-image:url(/assets/img/ilogo-recruitcrm.webp)}
.ilogo--jobadder{background-image:url(/assets/img/ilogo-jobadder.webp)}
.ilogo--vincere{background-image:url(/assets/img/ilogo-vincere.webp)}
.ilogo--sap-successfactors{background-image:url(/assets/img/ilogo-sap-successfactors.webp)}
.ilogo--workday{background-image:url(/assets/img/ilogo-workday.webp)}
.ilogo--oracle{background-image:url(/assets/img/ilogo-oracle.webp)}
.ilogo--bamboohr{background-image:url(/assets/img/ilogo-bamboohr.webp)}
.ilogo--salesforce{background-image:url(/assets/img/ilogo-salesforce.webp)}
.ilogo--hubspot{background-image:url(/assets/img/ilogo-hubspot.webp)}
.ilogo--openai{background-image:url(/assets/img/ilogo-openai.webp)}
.ilogo--claude{background-image:url(/assets/img/ilogo-claude.webp)}
.ilogo--gemini{background-image:url(/assets/img/ilogo-gemini.webp)}
.ilogo--mistral{background-image:url(/assets/img/ilogo-mistral.webp)}
.ph__i{display:block}
.lang a{text-decoration:none}

/* video du hero : la video remplit le cadre 16:9, sans le pointille de l'emplacement */
.hero__video{overflow:hidden}
.hero__video video{display:block;width:100%;height:100%;object-fit:cover;background:#0b2f25}
.page[data-page="home"] .hero__video{border:0}

/* ---------- bandeau de consentement (assets/consent.js) ----------
   « Tout refuser » et « Tout accepter » ont exactement le meme poids visuel (CNIL). */
.consent{position:fixed;left:20px;bottom:20px;z-index:1000;max-width:440px;padding:22px 22px 18px;
  border:1.5px solid rgba(223,255,165,.5);/* sinon invisible sur le pied de page, du même vert */
  border-radius:20px;background:var(--sapin);color:#fff;box-shadow:0 18px 48px rgba(4,52,40,.35);
  font-family:var(--corps);font-size:14px;line-height:1.5}
.consent[hidden],.consent__opts[hidden]{display:none}
.consent__titre{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em}
.consent__texte{margin:0;color:var(--texte-clair)}
.consent__texte a{color:var(--citron)}
.consent__opts{display:grid;gap:10px;margin-top:14px}
.consent__opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;cursor:pointer}
.consent__opt input{flex:none;width:16px;height:16px;margin-top:3px;accent-color:var(--citron)}
.consent__opt span{color:var(--texte-clair);font-size:13px}
.consent__opt b{display:block;font-weight:600;font-size:14px;color:#fff}
.consent__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.consent__b:not(.consent__b--plein){grid-column:1 / -1}
.consent__b{min-height:40px;padding:0 16px;border-radius:999px;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:600 14px/1 var(--corps)}
.consent__b--plein{background:var(--citron);border-color:var(--citron);color:var(--sapin)}
.consent__b:focus-visible,.consent__opt input:focus-visible{outline:2px solid var(--citron);outline-offset:2px}
@media (max-width:560px){.consent{left:10px;right:10px;bottom:10px;max-width:none}}

/* agenda de reservation : charge au clic (assets/consent.js) */
.cal__vide{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:clamp(320px,30vw,420px);padding:24px;text-align:center}
.cal__charger{min-height:44px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--sapin);color:#fff;font:600 15px/1 var(--corps)}
.cal__charger:focus-visible{outline:2px solid var(--sapin);outline-offset:3px}
.cal__avis{max-width:420px;margin:0;font-size:13px;color:#6B8579}

/* ---------- phrases sur une ligne (retours de recette, 16 octobre) ----------
   Les titres de section centres grandissent avec l'ecran (3,4 vw, 50 px au plus)
   alors que .wrap s'arrete a 1132 px de texte : de 1250 a 1920 px d'ecran, le
   dernier mot passait seul a la ligne. Ces titres peuvent deborder de .wrap
   jusqu'a 1380 px, sans jamais toucher les bords de l'ecran. */
.sec--proof h2,.sec--wall h2,.sec--plans h2,.sec--contact h2,.faq h2{
  margin-left:calc((100% - min(1380px, 100vw - 48px)) / 2);
  margin-right:calc((100% - min(1380px, 100vw - 48px)) / 2)}
.part__t{max-width:none}
.pc__lede{max-width:48em}
.contact__sub{max-width:38em}
/* quand la phrase doit passer a la ligne (mobile, cartes) : jamais un mot seul en derniere ligne */
h1,h2,h3{text-wrap:balance}
p,li,dd,blockquote,figcaption{text-wrap:pretty}